webpack打包 可视化查看打包后文件的大小

1. 使用webpack打包分析工具 webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

2. 在config/index.js中进行配置

build: {
  bundleAnalyzerReport: process.env.npm_config_report
}

3. 在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())
}
...

4. 打包输入命令

npm run build --report

5. 打包成功后就会看到这个

   
   image.png

6. 网页中就会显示出来所有打包出来的文件所占的大小了

   
   image.png