前言

在上兩章節中我們已經介紹過了 JavaScript 打包機制 以及 webpack 所有的內建配置，但當專案業務功能達到一定規模時，預設的配置已經不足以滿足開發、使用者的期望，我們就需要對 webpack 配置進行優化。

關於優化，有幾個基本規則：

• 首先知道要優化什麼；
• 針對待優化點進行優化；
• 衡量優化前後對專案的影響；

如何知道具體該如何優化喃，最直觀的方式是分析它的輸出檔案，但 webpack 打包後的檔案非常大且可讀性差，下面就介紹幾種視覺化的分析工具，幫助你快速定位問題所在。

一、測量構建時間

優化 webpack 構建速度的第一步是知道將精力集中在哪裡。我們可以通過 speed-measure-webpack-plugin

步驟一：安裝 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 能視覺化的反映：

• 打包出的檔案中都包含了什麼；
• 每個檔案的尺寸在總體中的佔比，哪些檔案尺寸大，思考一下，為什麼那麼大，是否有替換方案，是否使用了它包含的所有程式碼；
• 模組之間的包含關係；
• 是否有重複的依賴項，是否存在一個庫在多個檔案中重複？ 或者捆綁包中是否具有同一庫的多個版本？
• 是否有相似的依賴庫， 嘗試使用一種依賴庫實現相似的功能。
• 每個檔案的壓縮後的大小。

三、線上分析工具

如果你對在本地安裝外掛進行測量分析包方式感覺不爽的話，這裡將會推薦幾款線上測量工具，但都需要 webpack 統計檔案。

1. 生成統計檔案 stats.json

使用 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. 官方視覺化分析工具 Webapck Analyse

Webapck Analyse 是一個線上 Web 應用，它為你提供了對包的更全面的分析，並且它繪製了專案中所有依賴模組的圖形，這對於依賴關係較少的專案非常有用。

開啟 Webapck Analyse ，上傳 stats.json：

Webpack Analyse 不會把你選擇的 stats.json 檔案發達到伺服器，而是在瀏覽器本地解析，你不用擔心自己的程式碼為此而洩露。 選擇檔案後，你馬上就能如下的效果圖：

Modules ：展示所有的模組，每個模組對應一個檔案。並且還包含所有模組之間的依賴關係圖、模組路徑、模組ID、模組所屬 Chunk、模組大小；

Chunks ：展示所有的程式碼塊，一個程式碼塊中包含多個模組。並且還包含程式碼塊的ID、名稱、大小、每個程式碼塊包含的模組數量，以及程式碼塊之間的依賴關係圖；

Assets ：展示所有輸出的檔案資源，包括 .js、.css、圖片等。並且還包括檔名稱、大小、該檔案來自哪個程式碼塊；

Warnings ：展示構建過程中出現的所有警告資訊；

Errors ：展示構建過程中出現的所有錯誤資訊；

Hints ：展示處理每個模組的過程中的耗時。

3. Webpack Visualizer 分析工具

視覺化並分析您的Webpack捆綁包，以檢視哪些模組正在佔用空間，哪些可能是重複的。

它既可作為外掛使用，也可以線上使用，是一種較新的工具。

方式一：作為外掛使用

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 就可以看到分析結果了：

方式二：線上使用

開啟 chrisbateman.github.io/webpack-vis… ，上傳 stats.json 既可看到分析結果。

4. webpack bundle optimize helper 分析工具

開啟 webpack.jakoblind.no/optimize/ ，上傳 stats.json 既可看到分析結果及優化建議：

四、總結

我們總共介紹了以下 5 種測量工具，每種工具都提供了對包分析的不同視角，例如：

• 在開發過程中，當向專案引入新包時，我個人經常使用 Webpack Visualizer ，餅狀圖給出了關於大小的比例的即時反饋；
• 在分析每次構建版本的耗時情況時，相對於其它 4 中，speed-measure-webpack-plugin 能夠獲取每個外掛和 loader 的耗時情況，幫助你將注意力集中在需要優化的外掛上；
• webpack-bundle-analyzer 能夠將 bundle 內容展示為便捷的、互動式、可縮放的樹狀圖形式；
• Webapck Analyse 相對於其它 4 種，能夠對包進行全方位的分析；
• 相對於其它 4 種，webpack bundle optimize helper 能提供可操作的改進措施建議；

五、往期 webpack 系列

搜尋

複製