本頁面由 Cloud Translation API 翻譯而成。

透過精細的分塊改善 Next.js 和 Gatsby 網頁載入效能

Next.js 和 Gatsby 採用新的 Webpack 區塊處理策略，盡可能減少重複的程式碼，藉此改善網頁載入效能。

Houssein Djirdeh

Chrome 與 JavaScript 開放原始碼生態系統中的工具和架構合作。我們最近新增了幾項最佳化功能，改善 Next.js 和 Gatsby 的載入效能。本文介紹改善的精細區塊策略，現在這兩種架構預設都會提供這項功能。

引言

如同許多網路架構，Next.js 和 Gatsby 一樣使用 webpack 做為核心組合。Webpack v3 導入了 CommonsChunkPlugin，以在單一 (或少數)「共同」區塊 (或區塊) 輸出不同進入點之間共用的模組。共用的程式碼可單獨下載並儲存在瀏覽器快取中，因此可以加快載入效能。

許多單頁應用程式架構都採用進入點和套件組合設定，因此這個模式相當受歡迎，如下所示：

常見的進入點和套件設定

雖然實際上可行，但如果您將所有共用模組程式碼封裝成單一區塊，其概念仍具有限制。針對未使用每個進入點的路徑，您可以下載未共用的模組，進而產生多餘的程式碼。舉例來說，當 page1 載入 common 區塊時，即使 page1 並未使用 moduleC，仍會載入 moduleC 的程式碼。因此，Webpack v4 與另外一些外掛程式已移除此外掛程式，並改用新的外掛程式：SplitChunksPlugin。

改善分解

SplitChunksPlugin 的預設設定適用於大多數使用者。根據各種conditions建立多個分割區塊，以防止跨多個路徑擷取重複的程式碼。

然而，許多使用此外掛程式的網路架構仍會遵循「單一常見」方法進行區塊分割。舉例來說，Next.js 會產生 commons 套件，其中包含超過 50% 頁面和所有架構依附元件 (react、react-dom 等) 使用的任何模組。

const splitChunksConfigs = {
  …
  prod: {
    chunks: 'all',
    cacheGroups: {
      default: false,
      vendors: false,
      commons: {
        name: 'commons',
        chunks: 'all',
        minChunks: totalPages > 2 ? totalPages * 0.5 : 2,
      },
      react: {
        name: 'commons',
        chunks: 'all',
        test: /[\\/]node_modules[\\/](react|react-dom|scheduler|use-subscription)[\\/]/,
      },
    },
  },

雖然將架構相依的程式碼納入共用區塊後，表示該區塊可下載及快取任何進入點，但對於將超過半數網頁使用的常見模組納入運用式經驗法則來說，這種做法並不有效。修改這個比例只會產生兩種結果：

如果降低比率，就能下載更多不必要的程式碼。
如果提高比率，多條路線就會重複出現更多程式碼。

為解決這個問題，Next.js 為 SplitChunksPlugin 採用不同的設定，可減少任何路徑中不必要的程式碼。

任何大小充足的第三方模組 (超過 160 KB) 都會分割為獨立的區塊
系統會為架構依附元件 (react、react-dom 等) 建立單獨的 frameworks 區塊
可視需求建立多個共用區塊 (最多 25 個)
要產生的區塊大小下限已變更為 20 KB

這個精細的區塊策略提供下列優點：

縮短網頁載入時間。發出多個共用區塊 (而非單一區塊)，可盡量減少任何進入點不需要 (或重複) 程式碼的數量。
改善瀏覽期間的快取。將大型程式庫和架構依附元件分割成個別區塊，可以降低快取無效的可能性，因為在升級前這兩項變更不太可能發生。

您可以在 webpack-config.ts 中查看 Next.js 採用的完整設定。

透過精細區塊縮減大小

包括 Next.js 在內，許多架構都仰賴用戶端轉送 (由 JavaScript 處理) 在每個路徑轉換中插入新的指令碼標記。但他們在建構時該如何預先決定這些動態區塊？

Next.js 會使用伺服器端建構資訊清單檔案，判斷不同進入點使用的輸出區塊。為了讓用戶端也一併提供這些資訊，系統會建立簡化的用戶端建構資訊清單檔案，以對應每個進入點的所有依附元件。

// Returns a promise for the dependencies for a particular route
getDependencies (route) {
  return this.promisedBuildManifest.then(
    man => (man[route] && man[route].map(url => `/_next/${url}`)) || []
  )
}

這個較新的精細區塊策略首次在 Next.js 中推出，並是在旗標後方透過一組早期採用者進行測試。許多網站都發現，整個網站使用的 JavaScript 總數大幅降低：

減少所有路徑 (壓縮後) 的 JavaScript 大小
網站	JS 總變更	差異百分比
https://www.barnebys.com/	-238 KB	-23%
https://sumup.com/	-220 KB	30%
https://www.hashicorp.com/	-11 MB	71%

根據預設，最終版本是第 9.2 版提供。

加斯比

Gatsby 用於遵循使用以使用量經驗法則定義常見模組的相同方法：

config.optimization = {
  …
  splitChunks: {
    name: false,
    chunks: `all`,
    cacheGroups: {
      default: false,
      vendors: false,
      commons: {
        name: `commons`,
        chunks: `all`,
        // if a chunk is used more than half the components count,
        // we can assume it's pretty global
        minChunks: componentsCount > 2 ? componentsCount * 0.5 : 2,
      },
      react: {
        name: `commons`,
        chunks: `all`,
        test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
      },

藉由最佳化 Webpack 設定，採用類似的精細區塊策略，他們也注意到許多大型網站的 JavaScript 已縮小：

減少所有路徑 (壓縮後) 的 JavaScript 大小
網站	JS 總變更	差異百分比
https://www.gatsbyjs.org/	-680 KB	-22%
https://www.thirdandgrove.com/	-390 KB	-25%
https://ghost.org/	-1.1 MB	35%
https://reactjs.org/	-80 KB	-8%

請查看 PR，瞭解他們如何將這個邏輯導入至 webpack 設定中 (在 2.20.7 版中預設出貨)。

結語

運送精細區塊的概念不適用於 Next.js、Gatsby 或 Webpack。無論使用何種架構或模組組合器，只要遵循大型的「共同」套件方法，每個人都應考慮改善應用程式的區塊化策略。

如果您想將相同的區塊最佳化調整套用至基本功能 React 應用程式，請參閱這個 React 應用程式範例。這個範例應用程式採用簡化版的精細區塊策略，可協助您開始為網站套用相同的邏輯。
就 Rollup 來說，根據預設，區塊會建立更精細的區塊。如要手動設定行為，請查看 manualChunks。

透過精細的分塊改善 Next.js 和 Gatsby 網頁載入效能

引言

改善分解

更多 HTTP 要求

透過精細區塊縮減大小

加斯比

結語