# 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
// 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

# 打包分析

  • 配置环境
// .env.report
VUE_APP_REPORT=true
NODE_ENV=production

1
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
  • package.json
{
   "scripts": {
      "analyze": "vue-cli-service build --report --mode report"
    }
}
1
2
3
4
5