一、安裝

npm intall webpack-bundle-analyzer –save-dev

二、配置

在build/webpack.prod.config.js中的module.exports = webpackConfig這句話的上面增加

if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) }

三、運行

啟動服務：

生產環境查看：npm run build --report 或 正常build 即可啟動查看器

開發環境查看：webpack -p --progress 或啟動正常devServer服務即可啟動查看器!

四、結果

 該插件默認配置

new BundleAnalyzerPlugin({
  //  可以是`server`，`static`或`disabled`。
  //  在`server`模式下，分析器將啟動HTTP服務器來顯示軟件包報告。
  //  在“靜態”模式下，會生成帶有報告的單個HTML文件。
  //  在`disabled`模式下，你可以使用這個插件來將`generateStatsFile`設置為`true`來生成Webpack Stats JSON文件。
  analyzerMode: 'server',
  //  將在“服務器”模式下使用的主機啟動HTTP服務器。
  analyzerHost: '127.0.0.1',
  //  將在“服務器”模式下使用的端口啟動HTTP服務器。
  analyzerPort: 8888, 
  //  路徑捆綁，將在`static`模式下生成的報告文件。
  //  相對於捆綁輸出目錄。
  reportFilename: 'report.html',
  //  模塊大小默認顯示在報告中。
  //  應該是`stat`，`parsed`或者`gzip`中的一個。
  //  有關更多信息，請參見“定義”一節。
  defaultSizes: 'parsed',
  //  在默認瀏覽器中自動打開報告
  openAnalyzer: true,
  //  如果為true，則Webpack Stats JSON文件將在bundle輸出目錄中生成
  generateStatsFile: false, 
  //  如果`generateStatsFile`為`true`，將會生成Webpack Stats JSON文件的名字。
  //  相對於捆綁輸出目錄。
  statsFilename: 'stats.json',
  //  stats.toJson（）方法的選項。
  //  例如，您可以使用`source：false`選項排除統計文件中模塊的來源。
  //  在這里查看更多選項：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
  statsOptions: null,
  logLevel: 'info' // 日志級別。可以是'信息'，'警告'，'錯誤'或'沉默'。
})

 

模塊功能：

• 意識到你的文件打包壓縮后中真正的內容
• 找出哪些模塊組成最大的大小
• 找到錯誤的模塊
• 優化它！
• 最好的事情是它支持縮小捆綁！它解析它們以獲得實際大小的捆綁模塊。它也顯示他們的gzipped大小！