使用Webpack4優化Web性能（三）

時間 2020-06-10

標籤使用 webpack4 webpack 優化 web 性能欄目 HTML 简体版

原文原文鏈接

利用 Webpack 來優化 Web 性能屬於_加載性能優化_的一部分： ☛ Web Performance Optimization with webpack

3、監控和分析應用程序

在開發階段使用 webpack-dashboard 和 bundlesize 來調整應用程序的大小

webpack-dashboard

webpack-dashboard 經過展現依賴項大小、進度和其餘細節來加強 webpack 輸出，有助於跟蹤大型依賴項。html

npm install webpack-dashboard --save-dev

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

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

bundlesize

bundlesize 用於驗證 webpack 的資源不超過指定的大小，當應用程序變得太大時可以及時得知。java

（1）運行打包命令
（2）開啓 bundlesizereact

npm install bundlesize --save-dev

（3）在 package.json 中指定文件大小限制webpack

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

（4）執行 bundlesizegit

npx bundlesize

或者用 npm 執行：github

// package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

經過 webpack-bundle-analyzer 分析包的大小

webpack-bundle-analyzer 可以掃描 bundle 並對其內部內容進行可視化呈現，從而能夠發現大型的或者沒必要要的依賴項。web

npm install webpack-bundle-analyzer --save-dev

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

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

運行生產構建，該插件會在瀏覽器中打開可視化頁面。npm

默認狀況下，統計頁面顯示的是已解析文件的大小（當文件出如今包中時）。您可能想比較 gzip 以後的大小，由於它更接近實際用戶體驗，可使用左邊的邊欄來切換大小。json

對於報告，咱們須要關注的點有：segmentfault

大型依賴項：爲何這麼大？是否有更小的替代方案（例如，用 Preact 代替 React）？您是否使用了該庫包含的全部代碼（例如，Moment.js 包含了許多常常不使用且可能被刪除的地區設置）？
重複的依賴關係：您是否看到同一個庫在多個文件中重複出現？（在 webpack 4 中使用 optimization.splitChunks.chunks 將重複的依賴關係移動到一個公共文件）。或者某個包具備相同庫的多個版本?
類似的依賴關係：是否有相似的庫能夠作大體相同的工做？（例如，moment 和 date-fns，或 lodash 和 lodash-es），試着只用一個工具。

總結

（1）削減沒必要要的字節。壓縮全部內容，刪除未使用的代碼，明智地添加依賴項；
（2）按路由拆分代碼。只加載如今真正須要的東西，稍後再加載其餘東西；
（3）緩存代碼。應用程序的某些部分（如第三方庫）更新的頻率低於其餘部分，將這些部分分離到文件中，以便只在必要時從新下載；
（4）追蹤代碼大小。使用像 webpack-dashboard 和 webpack-bundle-analyzer 這樣的工具來了解你的應用程序有多大。