【譯】Google - 使用 webpack 進行 web 性能優化（三）：監控和分析應用

時間 2019-11-06

標籤 google 使用 webpack 進行 web 性能優化監控分析應用欄目 Google 简体版

原文原文鏈接

原文地址： monitor and analyze

原文做者： Ivan Akulov

譯文地址： 監控和分析應用

譯者： 泥坤

校對者： 楊建、閆蒙

即便你能夠經過配置 webpack 使得應用盡量小，追蹤它而且知道它包含什麼仍然是很重要的。不然，你可能安裝了一個讓應用大了兩倍的依賴卻渾然不覺。react

這節就來說幾個能夠幫助你深刻分析 bundle 的工具。webpack

追蹤 bundle 的大小

爲了監控你的應用大小，能夠在開發過程當中使用 webpack-dashboard 和在 CI 上使用 bundlesize。git

webpack-dashboard

webpack-dashboard 加強了 webpack 的輸出，包含依賴的大小、進度和其餘細節。這是它的界面：github

這個看板幫助追蹤大的依賴 —— 若是你增長了一個依賴，那麼你就可以馬上在 Modules 部分中看到它。web

要想使用它，須要安裝依賴包 webpack-dashboard :express

npm install webpack-dashboard --save-dev
複製代碼

而後在 webpack.config.js 文件中的 plugins 字段裏增長這個 plugin:npm

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  plugins: [
    new DashboardPlugin(),
  ],
};
複製代碼

若是你使用基於 express 的服務，也可使用 compiler.apply():json

compiler.apply(new DashboardPlugin());
複製代碼

盡情地使用 dashboard 來找到可能優化的地方吧！舉個例子，縱覽 Modules 部分能夠找到過大的庫，而後用相對小的庫來替代掉它。瀏覽器

bundlesize

bundlesize 校驗 webpack 的資源有沒有超過指定的大小。將它集成到 CI 中，就能夠在應用過大的時候收到提醒。緩存

配置:

肯定大小上限

先優化應用，讓它儘量小，而後運行生產環境構建；

在 package.json 中增長 bundlesize 字段的配置，以下：

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*"
    }
  ]
}
複製代碼

用 npx 執行 bundlesize:

npx bundlesize
複製代碼

將打印出每一個文件 gzip 事後的大小

PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
複製代碼

在每一個文件大小的基礎上增長 10-20%，就能夠獲得大小上限。這 10%-20% 的 buffer 能夠保證既不妨礙你平常開發，又能夠在它的體積增加過快的時候向你報警。

啓用 bundlesize

安裝 bunlesize 包做爲開發依賴:

npm install bundlesize --save-dev
複製代碼

在 package.json 的 bundlesize 字段裏，指定具體的大小上限，對於有的文件（例如圖片），你可能須要爲特定的文件類型設置上限，而不是每一個文件。

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*.png",
      "maxSize": "16 kB",
    },
    {
      "path": "./dist/main.*.js",
      "maxSize": "20 kB",
    },
    {
      "path": "./dist/vendor.*.js",
      "maxSize": "35 kB",
    }
  ]
}
複製代碼

增長 npm 腳原本運行檢查。

// package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}
複製代碼

配置好 CI ，以便在每次 push 的時候運行 npm run check-size （若是你在 github 上開發項目的話還能夠在 github 中集成 bundlesize)。

就是這樣！如今若是你運行 npm run check-size 或者 push 代碼，你會看到輸出文件是否足夠小。

若是是失敗的狀況：

擴展閱讀:

Alex Russell 關於現實世界中咱們應該追求的加載時間

分析 bundle 爲何這麼大

你可能想要深刻研究 bundle，來分析哪些模塊佔用了空間。請看 webpack-bundle-analyzer:

(Screen recording from github.com/webpack-con…)

webpack-bundle-analyzer 掃描 bundle 而且創建一個可視化的結果展現它包含什麼，經過該可視化界面能夠去找大的或者沒必要要的依賴。

要使用 analyzer，須要安裝 webpack-bundle-analyzer。

npm install webpack-bundle-analyzer --save-dev
複製代碼

在 webpack 配置文件裏增長一個 plugin。

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};
複製代碼

而後運行 production build，插件會在瀏覽器裏打開一個統計的頁面。

默認狀況下，統計頁面展現的是解析事後的文件大小。（即出如今 bundle 裏的文件），你可能想要比較 gzip 壓縮以後的大小，由於這會更接近真實用戶的體驗。能夠在側邊欄切換大小類型。

⭐️注意 : 若是你使用 ModuleConcatenationPlugin，一部分在 webpack-bundle-analyzer 輸出的模塊可能會被合併，使得報告的信息量減小。因此若是你在用這個插件，在分析的過程當中須要將它禁用掉。

如下是但願從報告中獲得的信息：

大的依賴 爲何他們那麼大？是否有更小的替代品（例如 Preact 代替 React）？你是否須要其中的所有代碼？（例如，Moment.js 包含不少並不常使用並能夠扔掉的本地化語言環境）
重複的依賴 你是否在多個文件裏看到相同的依賴？（使用像 webpack4 中的 optimization.splitChunks.chunks 選項或者 webpack3 中的 CommonsChunkPlugin 來將他們移到一個公共文件裏）或者 bundle 是否包含了同一個庫的多個版本？
類似的依賴 是否有類似的庫作着差很少的事情？（例如 comment 和 date-fns 或者 lodash 和 lodash-es）試着統一成單一的工具。

同時，建議看一下 Sean Larkin 的 great analysis of webpack bundles。

總結

使用 webpack-dashboard 和 bundlesize 來持續關注你的應用大小。
用 webpack-bundle-analyzer 來深究應用大小的構成

結論

原文地址： conclusion

原文做者： Ivan Akulov

譯文地址： 結論

譯者： 閆萌

校對者： 周文康、楊建

總結:

減小沒必要要的字節。 壓縮全部資源，去除無用代碼，謹慎添加依賴。
經過路由分離代碼。 只加載當前真正須要的資源，其餘的資源延遲加載。
緩存代碼。 應用中某部分代碼的更新頻率比其餘部分低。能夠將這部分代碼剝離，以便只在必要時從新加載。
持續關注應用大小。 使用像 webpack-dashboard 和 webpack-bundle-analyzer 這類的工具來了解應用的大小。而後每隔幾個月從新檢查一下應用的性能。

Webpack 不是惟一一個能夠幫助你讓應用變得更快的工具。還能夠考慮讓你的應用變成一個漸進式 web 應用（Progressive Web App），從而得到更好的體驗，而且使用像 Lighthouse 這樣的自動分析工具來得到改進意見。

別忘了去閱讀 webpack 文檔 - 那裏還有大量有用的信息。

同時記得用 training 項目來練習哦！