共计 861 个字符，预计需要花费 3 分钟才能阅读完成。
一、原理
读取输出文件夹（通常是 dist）中的 stats.json 文件，把该文件可视化展现的插件。便于直观地比较各个 bundle 文件的大小，以达到优化性能的目的。
二、安装
> npm install webpack-bundle-analyzer –save-dev
三、作为 webpack 插件使用
(1) 引入
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin
(2) 使用
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
…
}))
四、2 种方式
（1）每次构建时自动打开
构建完成之后，浏览器会自动打开 localhost:8888, 不用改动 package.json
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: ‘server’,
generateStatsFile: true,
statsOptions: {source: false}
}))
配置参数记得补上，不然构建完不会自动打开～
（2）运行特定命令才打开
把 analyzerMode 设置为 disabled
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: ‘disabled’,
generateStatsFile: true,
statsOptions: {source: false}
}))
在 package.json 的 scripts 字段中加入
“bundle-report”: “webpack-bundle-analyzer –port 8123 dist/stats.json”
其中 stat.json 文件的位置在打包后的文件夹中，通常是 dist，具体情况根据实际情况来定。
命令行中键入命令 npm run bundle-report
浏览器自动打开分析页面:localhost:8123
