# vue-配置按需加载
# 版本
vue-cli 4.x
# babel.config.js
npm install babel-plugin-component -D
1
多个同时配置 lodash element-ui mini-ui
,另外 lodash
需要增加插件
// lodash 要增加的
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new LodashModuleReplacementPlugin()
]
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// babel.config.js
module.exports = {
presets: [
['@vue/cli-plugin-babel/preset', { 'modules': false }]
],
'plugins': [
'lodash',
['component',
{
'libraryName': 'mint-ui',
'style': true
},
'mint-ui'
],
['component',
{ 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' },
'element-ui'
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 打包分析
- 配置环境
// .env.report
VUE_APP_REPORT=true
NODE_ENV=production
1
2
3
4
2
3
4
- 增加插件
// babel.config.js
module.exports = {
chainWebpack: config => {
if (process.env.VUE_APP_REPORT) {
config
.plugin('webpack-bundle-analyzer')
.use(BundleAnalyzerPlugin)
.init(Plugin => new Plugin())
}
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- package.json
{
"scripts": {
"analyze": "vue-cli-service build --report --mode report"
}
}
1
2
3
4
5
2
3
4
5