- 使用webpack打包分析工具 webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
- 在config/index.js中进行配置
build: {
bundleAnalyzerReport: process.env.npm_config_report
}
- 在build/webpack.test.conf.js中进行配置（当前是测试环境，正式环境在build/webpack.prod.conf.js）
...
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
...
- 打包输入命令
npm run build --report
-
打包成功后就会看到这个
image.png -
网页中就会显示出来所有打包出来的文件所占的大小了
image.png
