webpack-bundle-analyzer文件大小分析工具

1、安装分析工具：

npm intall webpack-bundle-analyzer -D

2、webpack.prod.config.js 中添加如下代码

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

如图所示：

3、运行命令查看各文件大小

方式一：执行命令：npm run build --report

方式二：
1）package.json中scripts对象添加如下命令

scripts:{
	... //省略无关代码
	"analyz": "cross-env NODE_ENV=production cross-env npm_config_report=true npm run build"
}

2）执行命令：npm run analyz

分析界面图如下所示：