五種可視化方案分析 webpack 打包性能瓶頸

前言

在上兩章節中咱們已經介紹過了 JavaScript 打包機制以及 webpack 全部的內置配置，但當項目業務功能達到必定規模時，默認的配置已經不足以知足開發、用戶的指望，咱們就須要對 webpack 配置進行優化。css

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

首先知道要優化什麼；
針對待優化點進行優化；
衡量優化先後對項目的影響；

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

1、測量構建時間

優化 webpack 構建速度的第一步是知道將精力集中在哪裏。咱們能夠經過 speed-measure-webpack-plugin 測量你的 webpack 構建期間各個階段花費的時間：webpack

步驟一：安裝 speed-measure-webpack-plugingit

npm install speed-measure-webpack-plugin --save-dev
複製代碼

步驟二：配置github

// 分析打包時間
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig)
複製代碼

它可以：web

分析整個打包總耗時；
每一個插件和 loader 的耗時狀況；

方便開發人員定位打包耗時瓶頸。npm

2、分析包內容

webpack-bundle-analyzer 掃描 bundle 並構建其內部內容的可視化。使用此可視化來查找大的或沒必要要的依賴項。json

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

打包出的文件中都包含了什麼；
每一個文件的尺寸在整體中的佔比，哪些文件尺寸大，思考一下，爲何那麼大，是否有替換方案，是否使用了它包含的全部代碼；
模塊之間的包含關係；
是否有重複的依賴項，是否存在一個庫在多個文件中重複？或者捆綁包中是否具備同一庫的多個版本？
是否有類似的依賴庫，嘗試使用一種依賴庫實現類似的功能。
每一個文件的壓縮後的大小。

3、在線分析工具

若是你對在本地安裝插件進行測量分析包方式感受不爽的話，這裏將會推薦幾款在線測量工具，但都須要 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 既可看到分析結果及優化建議：

4、總結

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

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

5、往期 webpack 系列

webpack 最佳配置指北

窺探原理：手寫一個 JavaScript 打包器

若是以爲不錯，就點個贊吧！👍👍👍

想看往期更過系列文章，點擊前往 github 博客主頁

6、走在最後

❤️玩得開心，不斷學習，並始終保持編碼。👨💻
若有任何問題或更獨特的看法，歡迎評論或直接聯繫瓶子君（掃碼關注公衆號回覆 123 便可）！👀👇
👇歡迎關注：前端瓶子君，每日更新！👇