Vue安装 项目可视化分析包大小工具webpack-bundle-analyzer

1.安装：

npm install webpack-bundle-analyzer –save-dev
//或
yarn add webpack-bundle-analyzer -D

2.配置：在build/webpack.prod.config.js添加

...
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
...
module.exports = webpackConfig

新版的 vue-cli 也内置了webpack-bundle-analyzer，直接第3步启动

3.启动：

npm run build --report

运行如下图：会自动打开 127.0.0.1:8888

显示每个文件大小，找到相关文件优化即可。