性能分析webpack-bundle-analyzer

webpack插件的github地址是：

https://github.com/webpack-contrib/webpack-bundle-analyzer/

安裝

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

package.json

 "dev": "cross-env  webpack-dev-server --open --config ./webpack.config.dev.js --color"
 "build": "cross-env BABEL_ENV=production webpack --color --config ./webpack.config.prod.js"

webpack.config.dev.js/webpack.config.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      ...更多配置
    }),
}

我個人是直接執行 npm run dev  或者 npm run build 就可根據分析工具的配置進行查看

更多配置

• analyzerMode:'server'，可以是server，static，json，disabled。在server模式下，分析器將啓動HTTP服務器來顯示軟件包報告。在“靜態”模式下，會生成帶有報告的單個HTML文件。在disabled模式下，你可以使用這個插件來將generateStatsFile設置爲true來生成Webpack Stats JSON文件。
• analyzerHost: '127.0.0.1', 將在“服務器”模式下使用的端口啓動HTTP服務器。
• analyzerPort: 8888, 端口號。
• reportFilename: 'report.html', 路徑捆綁，將在static模式下生成的報告文件。相對於捆綁輸出目錄。
• defaultSizes: 'parsed'，默認顯示在報告中的模塊大小匹配方式。應該是stat，parsed或者gzip中的一個。
• openAnalyzer: true：在默認瀏覽器中自動打開報告。
• generateStatsFile:false: 如果爲true，則Webpack Stats JSON文件將在bundle輸出目錄中生成。
• statsFilename: 'stats.json', 相對於捆綁輸出目錄。
• statsOptions: null，stats.toJson()方法的選項。例如，您可以使用source：false選項排除統計文件中模塊的來源。在這裏查看更多選項：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
• logLevel: 'info'，日誌級別，可以是info, warn, error, silent。
• excludeAssets:null，用於排除分析一些文件

其他

由於webpack-bundle-analyzer是默認打開一個本地的端口8888來顯示結果，而webpack-dev-server是默認打開本地的3000端口，兩者的行爲是有些類似的。只要在webpack的配置文件中，配置了webpack-bundle-analyzer，那麼就會打開8888端口。

所以，對於webpack這件事情來說，

如果執行的命令是webpack，那麼，就只會打開webpack-bundle-analyzer的8888。 如何執行的命令是webpack-dev-server的話，那麼就會打開兩個網頁（瀏覽器），一個是端口3000，一個是端口8888。

另外，額外的補充一下： webpack-dev-server是可以定義用什麼瀏覽器打開的。 截至到發稿，webpack-bundle-analyzer是不能定義使用什麼瀏覽器打開的。作者比較軸，就是不肯添加這麼一個選項，而edge瀏覽器默認打不開相關視圖。