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
显示每个文件大小,找到相关文件优化即可。