Webpack Bundle Analyzer插件的使用

一、原理
读取输出文件夹（通常是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