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