Webpack Bundle Analyzer插件的使用

1、原理

讀取輸出文件夾（一般是dist）中的stats.json文件，把該文件可視化展示的插件。便於直觀地比較各個bundle文件的大小，以達到優化性能的目的。

2、安裝

> npm install webpack-bundle-analyzer --save-dev

3、做爲webpack插件使用

一、引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

二、使用

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))

4、2種方式

一、每次構建時自動打開

構建完成以後，瀏覽器會自動打開localhost:8888,不用改動package.json

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

配置參數記得補上，否則構建完不會自動打開～

二、運行特定命令纔打開

（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