SplitChunksPlugin#

デフォルト#

ほとんどのユーザーにとって、SplitChunksPlugin はすぐに使用できます。

デフォルトでは、オンデマンドチャンクのみに影響します。初期チャンクを変更すると、プロジェクトを実行するためにHTMLファイルに含める必要があるスクリプトタグに影響するためです。

Rspack は以下の条件に基づいてチャンクを自動的に分割します。

• 新しいチャンクを共有できる、またはモジュールが node_modules フォルダーにある。
• 新しいチャンクのサイズが 20KB を超える (最小化+圧縮前)。
• オンデマンドでチャンクをロードする際の最大並列リクエスト数が 30 以下である。
• 初期ページロード時の最大並列リクエスト数が 30 以下である。

最後の2つの条件を満たそうとするときに、より大きなチャンクが優先されます。

オプション#

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の場合。

各cacheGroupでも使用可能: splitChunks.cacheGroups.{cacheGroup}.name。

分割チャンクの名前。falseを指定すると、チャンクの同じ名前が維持されるため、名前が不要に変更されることはありません。本番ビルドには推奨値です。

文字列を指定すると、カスタム名を使用できます。文字列を指定すると、すべての共通モジュールとベンダーが単一のチャンクにマージされます。これにより、初期ダウンロードサイズが大きくなり、ページの読み込み速度が低下する可能性があります。

splitChunks.nameがエントリポイント名と一致する場合、エントリポイントは削除されます。

splitChunks.usedExports#

• 型: boolean
• デフォルト: optimization.usedExportsの値

この設定を有効にすると、チャンクの分割は、異なるランタイムでのモジュールエクスポートの使用状況に基づいてグループ化され、各ランタイムでの最適なロードサイズが確保されます。

たとえば、foo、bar、bazという名前の3つのエントリポイントがあり、すべて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モジュールは別のチャンクに抽出する必要があります。

しかし、これでは、3つのエントリポイントのいずれにも最適なロードサイズが得られません。fooとbarのエントリからsharedモジュールをロードすると、エクスポートvalue2が不要にロードされ、bazのエントリからロードすると、エクスポートvalue1が不要にロードされます。

splitChunks.usedExports最適化を有効にすると、sharedモジュールのどのエクスポートが異なるエントリで使用されているかを分析します。これにより、fooとbarで使用されているエクスポートはbazで使用されているエクスポートとは異なることが判明し、fooとbarのエントリに対応する1つと、bazのエントリに対応するもう1つの、2つの異なるチャンクが作成されます。

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では、cacheGroupの設定により、モジュールBはモジュールBのみを含む新しいチャンクに分割されます。この新しいチャンクは、それが含むモジュールの点でチャンクBarと同一であるため、チャンクBarを直接再利用できます。

reuseExistingChunkの設定がfalseに設定されている場合、チャンクBarとFooのモジュールBは新しいチャンクに移動され、チャンクBarはモジュールを含まなくなるため、空のチャンクとして削除されます。

splitChunks.cacheGroups.{cacheGroup}.type#

• タイプ: string | RegExp

モジュールタイプでモジュールをキャッシュグループに割り当てることができます。