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

分析界面圖如下所示：