SplitChunksPlugin#

預設#

開箱即用的 SplitChunksPlugin 對大多數用戶來說應該都運作良好。

預設情況下，它只會影響按需載入的區塊，因為變更初始區塊會影響 HTML 檔案應包含以執行專案的腳本標籤。

Rspack 會根據以下條件自動分割區塊

• 新的區塊可以被共享，或是模組來自 node_modules 資料夾
• 新的區塊會大於 20kb（在最小化和 gzip 之前）
• 按需載入區塊時，最大平行請求數會低於或等於 30
• 初始頁面載入時，最大平行請求數會低於或等於 30

當嘗試滿足最後兩個條件時，會優先選擇較大的區塊。

選項#

Rspack 為希望更精細控制此功能的開發人員提供了一組選項。

optimization.splitChunks#

此設定物件代表 SplitChunksPlugin 的預設行為。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minChunks: 1,
      minSize: 20000,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

splitChunks.cacheGroups#

快取群組可以繼承和/或覆寫來自 splitChunks.{cacheGroup}.* 的任何選項； 但 test、priority 和 reuseExistingChunk 只能在快取群組層級上設定。 若要停用任何預設快取群組，請將它們設定為 false。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
      },
    },
  },
};

splitChunks.chunks#

splitChunks.cacheGroups.{cacheGroup}.chunks#

• 類型： 'initial' | 'all' | 'async' | RegExp | ((chunk: Chunk) => bool)
• 預設： 'async'

這表示將選取哪些區塊進行最佳化。

當提供字串時，有效值為 all、async 和 initial。 提供 all 可能特別強大，因為這表示區塊甚至可以在非同步和非非同步區塊之間共享。

或者，您可以提供一個函式來進行更多控制。 傳回值將表示是否包含每個區塊。

您也可以傳遞正規表示式，它是 (chunk) => regex.test(chunk.name) 的簡寫。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
    },
  },
};

splitChunks.maxAsyncRequests#

• 類型： number
• 預設： 30

按需載入時的最大平行請求數。

splitChunks.maxInitialRequests#

• 類型： number
• 預設： 30

進入點的最大平行請求數。

splitChunks.minChunks#

splitChunks.cacheGroups.{cacheGroup}.minChunks#

• 類型： number
• 預設： 1

在分割之前，模組必須在區塊之間共享的最小次數。

splitChunks.hidePathInfo#

• 類型： boolean
• 預設：如果 options.mode 是 'production'，則預設為 true，否則預設為 false

在建立按 maxSize 分割的部分的名稱時，防止公開路徑資訊。

splitChunks.minSize#

• 類型： number | Record<string, number>
• 預設：在生產環境中為 20000，在其他環境中為 10000

產生區塊的最小大小（以位元組為單位）。

splitChunks.maxSize#

number | Record<string, number> = 0

使用 maxSize（全域 optimization.splitChunks.maxSize、每個快取群組 optimization.splitChunks.cacheGroups[x].maxSize 或回退快取群組 optimization.splitChunks.fallbackCacheGroup.maxSize）會告訴 Rspack 嘗試將大於 maxSize 位元組的區塊分割成較小的部分。 部分的大小將至少為 minSize（在 maxSize 旁邊）。 該演算法是決定性的，對模組的變更只會產生局部影響。 因此，它在使用長期快取時可以使用，且不需要記錄。 maxSize 只是一個提示，當模組大於 maxSize 或分割會違反 minSize 時，可能會被違反。

當區塊已經有名稱時，每個部分都會取得一個從該名稱衍生而來的新名稱。 根據 optimization.splitChunks.hidePathInfo 的值，它會新增一個從第一個模組名稱衍生而來的索引鍵，或是它的雜湊值。

maxSize 選項旨在與 HTTP/2 和長期快取搭配使用。 它會增加請求數以獲得更好的快取。 它也可用於減少檔案大小，以加快重建速度。

splitChunks.maxAsyncSize#

number | Record<string, number>

與 maxSize 類似，maxAsyncSize 可以全域套用 (splitChunks.maxAsyncSize)、套用於快取群組 (splitChunks.cacheGroups.{cacheGroup}.maxAsyncSize) 或回退快取群組 (splitChunks.fallbackCacheGroup.maxAsyncSize)。

maxAsyncSize 和 maxSize 的差異在於，maxAsyncSize 只會影響按需載入的程式碼區塊。

splitChunks.maxInitialSize#

number | Record<string, number>

與 maxSize 類似，maxInitialSize 可以全域套用 (splitChunks.maxInitialSize)、套用到快取群組 (splitChunks.cacheGroups.{cacheGroup}.maxInitialSize)，或套用到備用快取群組 (splitChunks.fallbackCacheGroup.maxInitialSize)。

maxInitialSize 和 maxSize 的差異在於，maxInitialSize 只會影響初始載入的程式碼區塊。

splitChunks.automaticNameDelimiter#

• 類型： string
• 預設值： -

預設情況下，Rspack 會使用程式碼區塊的來源和名稱來產生名稱 (例如：vendors-main.js)。

此選項可讓您指定用於產生名稱的分隔符號。

splitChunks.name#

splitChunks.cacheGroups.{cacheGroup}.name#

• 類型： string | function
• 預設值： false

其中函式類型的版本為 >=0.4.1。

每個快取群組也提供此選項：splitChunks.cacheGroups.{cacheGroup}.name。

分割程式碼區塊的名稱。提供 false 將保持程式碼區塊的名稱不變，避免不必要的名稱變更。這是生產版本建置的建議值。

提供字串可讓您使用自訂名稱。指定字串會將所有共用模組和 vendors 合併到單一程式碼區塊中。這可能會導致初始下載量較大，並減慢頁面載入速度。

如果 splitChunks.name 與進入點名稱相符，則該進入點將被移除。

splitChunks.usedExports#

• 類型： boolean
• 預設值： optimization.usedExports 的值

啟用此設定後，程式碼區塊的分割將根據不同執行環境中模組匯出的使用情況進行分組，確保每個執行環境的最佳載入大小。

例如，如果有三個名為 foo、bar 和 baz 的進入點，它們都依賴於同一個名為 shared 的模組。但是，foo 和 bar 依賴於 shared 中的匯出 value1，而 baz 則依賴於 shared 中的匯出 value2。

import { value1 } from 'shared';
value1;

import { value1 } from 'shared';
value1;

import { value2 } from 'shared';
value2;

在預設策略中，shared 模組會出現在 3 個程式碼區塊中。如果它符合分割的 minSize，則應將 shared 模組提取到一個單獨的程式碼區塊中。

但是，這會導致三個進入點都沒有最佳的載入大小。從 foo 和 bar 進入點載入 shared 模組會不必要地載入匯出 value2，而從 baz 進入點載入則會不必要地載入匯出 value1。

當啟用 splitChunks.usedExports 最佳化時，它會分析 shared 模組的哪些匯出在不同的進入點中使用。它發現 foo 和 bar 中使用的匯出與 baz 中的匯出不同，導致產生兩個不同的程式碼區塊，一個對應於進入點 foo 和 bar，另一個對應於進入點 baz。

splitChunks.defaultSizeTypes#

• 類型： string[]

設定當數字用於大小時使用的尺寸類型。

splitChunks.cacheGroups#

快取群組可以繼承和/或覆寫 splitChunks.* 中的任何選項；但 test、priority 和 reuseExistingChunk 只能在快取群組層級設定。若要停用任何預設快取群組，請將它們設定為 false。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
      },
    },
  },
};

splitChunks.cacheGroups.{cacheGroup}.priority#

• 類型： number
• 預設值： -20

一個模組可以屬於多個快取群組。最佳化會優先選擇 priority 較高的快取群組。預設群組具有負優先權，以允許自訂群組具有更高的優先權 (自訂群組的預設值為 0)。

splitChunks.cacheGroups.{cacheGroup}.test#

• 類型： RegExp | string | function

其中函式類型的版本為 >=0.4.1。

控制此快取群組選取的模組。省略此選項會選取所有模組。它可以匹配絕對模組資源路徑或程式碼區塊名稱。當匹配程式碼區塊名稱時，會選取程式碼區塊中的所有模組。

splitChunks.cacheGroups.{cacheGroup}.enforce#

• 類型： boolean

告知 Rspack 忽略 splitChunks.minSize、splitChunks.minChunks、splitChunks.maxAsyncRequests 和 splitChunks.maxInitialRequests 選項，並始終為此快取群組建立程式碼區塊。

splitChunks.cacheGroups.{cacheGroup}.idHint#

• 類型： string

設定程式碼區塊 ID 的提示。它將被新增到程式碼區塊的檔名中。

splitChunks.cacheGroups.{cacheGroup}.filename#

• 類型： string

允許在它是初始程式碼區塊時覆寫檔名。output.filename 中可用的所有佔位符號在此處也可用。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          filename: 'vendors-[name].js',
        },
      },
    },
  },
};

splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk#

• 類型： boolean
• 預設值： false

是否在可能的情況下重複使用現有的程式碼區塊。如果是這樣，在分割後，新建立的程式碼區塊包含的模組與原始程式碼區塊中的模組完全相同，則會重複使用原始程式碼區塊，並且不會產生新的程式碼區塊，這可能會影響程式碼區塊的最終檔名。例如

在程式碼區塊 Foo 和 Bar 中，模組 B 由於 cacheGroup 的設定，將被分割成一個僅包含模組 B 的新程式碼區塊。這個新程式碼區塊在它包含的模組方面與程式碼區塊 Bar 相同，因此可以直接重複使用程式碼區塊 Bar。

如果 reuseExistingChunk 的設定設定為 false，則程式碼區塊 Bar 和 Foo 中的模組 B 將被移動到一個新的程式碼區塊，而程式碼區塊 Bar 由於不再包含任何模組，將作為空的程式碼區塊而被刪除。

splitChunks.cacheGroups.{cacheGroup}.type#

• 類型： string | RegExp

允許依模組類型將模組指派給快取群組。