18 October 2018 / REACT WEBPACK ASP.NET MVC

Webpack Plugin 介紹 - 分析工具篇

非常實用的視覺化打包分析工具，打包模組視覺化後，可以一目了然目前打包了那些模組、哪個模組體積過大或是重複打包，專案優化必備工具。

webpack-bundle-analyzer

先安裝 Plugin

npm i webpack-bundle-analyzer -D

設定檔調整如下

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

這樣就能正常使用囉，只要執行打包成功後，就會將打包分析結果顯示在 8888 port ( default )。

透過這個套件，我們可以清楚的看到，打包整體時間、各 Plugin、Loader 處理時間分別為何，以利我們針對打包速度去做優化。

示意畫面

先安裝 Plugin

npm i speed-measure-webpack-plugin -D

設定檔調整如下

var SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
var smp = new SpeedMeasurePlugin()
module.exports = smp.wrap({
  ...
})

這樣每次打包就能夠查看每個 Plugin、Loader 耗用了多少時間

示意圖

先使用 Webpack 打包指令生成 Webpack stats 分析文件

webpack --profile --json > stats.json

然後到官方提供的這個網頁上傳 stats.json

就可以透過一些視覺化資料來分析打包結果

[詳細使用方式請看這裡](http://webpack.github.io/analys

Webpack Plugin 介紹 - 提示工具篇