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、运行特定命令才打开

（1）把analyzerMode设置为disabled

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
    generateStatsFile: true,
    statsOptions: { source: false }
}))

（2）在package.json的scripts字段中加入

"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json"

其中stat.json文件的位置在打包后的文件夹中，通常是dist，具体情况根据实际情况来定。

（3）命令行中键入命令
npm run bundle-report

浏览器自动打开分析页面:localhost:8123