前言
關于Webpack優化，有幾個基本規則：
- 首先知道要優化什麼；
- 針對待優化點進行優化；
- 衡量優化前後對項目的影響；
如何知道具體該如何優化最直覺的方式是分析它的輸出檔案，但 webpack 打包後的檔案非常大且可讀性差，下面就介紹幾種可視化的分析工具，幫助你快速定位問題所在。
一、測量建構時間
優化 webpack 建構速度的第一步是知道将精力集中在哪裡。可以通過 speed-measure-webpack-plugin 測量你的 webpack 建構期間各個階段花費的時間：
步驟一：安裝 speed-measure-webpack-plugin
npm install speed-measure-webpack-plugin --save-dev 步驟二：配置
// 分析打包時間
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig) 
它能夠：
- 分析整個打包總耗時；
- 每個插件和 loader 的耗時情況；
友善開發人員定位打包耗時瓶頸。
二、分析包内容
webpack-bundle-analyzer 掃描 bundle 并建構其内部内容的可視化，使用此可視化工具來查找大的或不必要的依賴項。
步驟一：安裝 webpack-bundle-analyzer
npm install webpack-bundle-analyzer --save-dev 步驟二：配置
// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
// 開啟 BundleAnalyzerPlugin
new BundleAnalyzerPlugin(),
],
}; 一般運作在生産版本中，該插件将在浏覽器中打開統計資訊結果頁面。
注意：webpack4 在 production 環境下預設啟動了 ModuleConcatenationPlugin （預編譯所有子產品到一個閉包中，提升代碼在浏覽器中的執行速度），它可能會合并webpack-bundle-analyzer 輸出中的子產品的一部分，進而使報告不太詳細。 如果你使用此插件，請在分析過程中将其禁用。設定如下：
module.exports = {
// ...
optimization: {
//
concatenateModules: false,
}
}; 具體來說，使用 webpack-bundle-analyzer 能可視化地反映：
- 打包出的檔案中都包含了什麼；
- 每個檔案的尺寸在總體中的占比，哪些檔案尺寸大，思考一下，為什麼那麼大，是否有替換方案，是否使用了它包含的所有代碼；
- 子產品之間的包含關系；
- 是否有重複的依賴項，是否存在一個庫在多個檔案中重複？ 或者bundle中是否具有同一庫的多個版本？
- 是否有相似的依賴庫， 嘗試使用一種依賴庫實作相似的功能。
- 每個檔案壓縮後的大小。
三、線上分析工具
如果你對在本地安裝插件進行測量分析包方式感覺不爽的話，這裡将會推薦幾款線上測量工具，但都需要 webpack 統計檔案。
1. 生成 stats 檔案
使用 webpack 編譯源代碼時，使用者可以生成一個包含有關子產品統計資訊的 JSON 檔案。 這些統計資訊可用于分析應用程式的依賴關系圖以及優化編譯速度。 該檔案通常是按以下方式生成的：
在 webpack 啟動時帶入參數：--profile --json > stats.json ，例如：
webpack --config webpack.config.prod.js --profile --json > stats.json - --profile：記錄下建構過程中的耗時資訊
- --json：以 JSON 的格式輸出建構結果，最後隻輸出一個 .json 檔案，這個檔案（stats.json）中包括所有建構相關的資訊
- > stats.json ：是 UNIX/Linux 系統中的管道指令、含義是把 webpack --profile --json 輸出的内容通過管道輸出到 stats.json 檔案中
執行指令後，會在項目中多出一個 stats.json 檔案，接下來将 stats.json 檔案上傳到以下線上工具上以可視化分析包的組成。
常用的線上工具有：
- 官方可視化分析工具 Webapck Analyse：生成一個圖表，讓你可視化了解項目的依賴關系、子產品大小及耗時等；
- Webpack Visualizer：生成一個餅狀圖，可視化 bundle 内容；
- webpack bundle optimize helper：此工具會分析你的 bundle，并為你提供可操作的改進措施建議，以減少 bundle 體積大小。
2. 官方可視化分析工具 Webpack Analyse
Webpack Analyse 是一個線上 Web 應用，它為你提供了對包的更全面的分析，并且它繪制了項目中所有依賴子產品的圖形，這對于依賴關系較少的項目非常有用。
打開 Webpack Analyse ，上傳 stats.json：
Webpack Analyse 不會把你選擇的 stats.json 檔案發達到伺服器，而是在浏覽器本地解析，你不用擔心自己的代碼為此而洩露。 選擇檔案後，你馬上就能如下的效果圖：
Modules ：展示所有的子產品，每個子產品對應一個檔案。并且還包含所有子產品之間的依賴關系圖、子產品路徑、子產品ID、子產品所屬 Chunk、子產品大小；
Chunks ：展示所有的代碼塊，一個代碼塊中包含多個子產品。并且還包含代碼塊的ID、名稱、大小、每個代碼塊包含的子產品數量，以及代碼塊之間的依賴關系圖；
Assets ：展示所有輸出的檔案資源，包括 .js、.css、圖檔等。并且還包括檔案名稱、大小、該檔案來自哪個代碼塊；
Warnings ：展示建構過程中出現的所有警告資訊；
Errors ：展示建構過程中出現的所有錯誤資訊；
Hints ：展示處理每個子產品的過程中的耗時。
3. Webpack Visualizer
可視化分析您的Webpack輸出bundle以檢視哪些子產品正在占用空間，哪些可能是重複的。它既可作為插件使用，也可以線上使用，是一種較新的工具。
方式一：作為插件使用
npm install webpack-visualizer-plugin --dev-save 配置：
// 分析包内容
const Visualizer = require('webpack-visualizer-plugin');
module.exports = {
plugins: [
// 開啟 Visualizer
// 預設輸出為 stats.html，這裡為 statistics.html
new Visualizer({
filename: './statistics.html'
})
],
}; 然後在浏覽器中直接打開 statistics.html 就可以看到分析結果了：
方式二：線上使用
打開 http://chrisbateman.github.io/webpack-visualizer/ ，上傳 stats.json 既可看到分析結果。
4. webpack bundle optimize helper
打開 https://webpack.jakoblind.no/optimize/ ，上傳 stats.json 既可看到分析結果及優化建議：
四、總結
我們總共介紹了以下 5 種測量工具，每種工具都提供了對包分析的不同視角，例如：
- 在開發過程中，當向項目引入新包時，我個人經常使用 Webpack Visualizer ，餅狀圖給出了關于大小的比例的即時回報；
- 在分析每次建構版本的耗時情況時，相對于其它 4 中，speed-measure-webpack-plugin 能夠擷取每個插件和 loader 的耗時情況，幫助你将注意力集中在需要優化的插件上；
- webpack-bundle-analyzer 能夠将 bundle 内容展示為便捷的、互動式、可縮放的樹狀圖形式；
- Webpack Analyse 相對于其它 4 種，能夠對包進行全方位的分析；
- 相對于其它 4 種，webpack bundle optimize helper 能提供可操作的改進措施建議；
參考資料
原文連結：https://github.com/sisterAn/blog/issues/67