最適化#

Rspack は、mode に基づいて適切な最適化設定を選択します。また、optimization を介して設定をカスタマイズすることもできます。

optimization.moduleIds#

• 型: 'natural' | 'named' | 'deterministic'

optimization.chunkIds#

• 型: 'named' | 'deterministic'

optimization.minimize#

• 型: boolean
• デフォルト:本番モード はtrue、開発モード はfalse

バンドルを最小化するかどうか。

optimization.mergeDuplicateChunks#

• 型: boolean
• デフォルト:true

同じモジュールを含むチャンクをマージするかどうか。 optimization.mergeDuplicateChunks を false に設定すると、この最適化は無効になります。

optimization.minimizer#

• 型: Array<Plugin>
• デフォルト:[new SwcJsMinimizerRspackPlugin(), new LightningCssMinimizerRspackPlugin()]

ミニマイザーをカスタマイズします。デフォルトでは、rspack.SwcJsMinimizerRspackPlugin と rspack.LightningCssMinimizerRspackPlugin が使用されます。 optimization.minimizer が指定されている場合、デフォルトのミニマイザーは無効になります。

const terserPlugin = require('terser-webpack-plugin');
module.exports = {
  context: __dirname,
  target: 'node',
  entry: {
    main: './index.js',
  },
  optimization: {
    minimize: true,
    minimizer: [new terserPlugin()],
  },
};

組み込みミニマイザーをカスタムオプションで使用します

const rspack = require('@rspack/core');
module.exports = {
  // ...
  optimization: {
    minimize: process.env.NODE_ENV === 'production',
    // when `optimization.minimizer` is specified, the default minimizers are disabled by default
    // but you can use '...', it represents the default minimizers
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          format: {
            comments: false,
          },
        },
      }),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: {
          errorRecovery: false,
        },
      }),
    ],
  },
};

optimization.removeEmptyChunks#

• 型: boolean
• デフォルト:true

コンパイルで生成された空のチャンクを削除します.

optimization.runtimeChunk#

• 型: boolean | string | ((entrypoint: { name: string }) => string)
• デフォルト:false

ランタイムチャンクの生成方法を制御するために使用されます。

true または 'multiple' に設定すると、各エントリポイントのランタイムのみを含むチャンクが追加されます。

'single' に設定すると、すべてのエントリポイントのランタイムコードが単一の個別のチャンクに抽出されます。

optimization.realContentHash#

• 型: boolean | 'flag'
• デフォルト:本番モード はtrue、開発モード はfalse

アセットが処理された後、正しいアセットコンテンツハッシュを取得するために、追加のハッシュ計算パスを追加します。この機能は、本番モードではデフォルトで有効になります。

realContentHash が false に設定されている場合、内部データを使用してハッシュが計算され、アセットが同一である場合にハッシュが変更される可能性があります。

module.exports = {
  //...
  optimization: {
    realContentHash: true,
  },
};

optimization.splitChunks#

• 型: false | object

Rspack は、optimization.splitChunks 設定項目を使用してチャンクの分割をサポートしています。

動的にインポートされたモジュールでは、デフォルトで有効になっています。

無効にするには、false に設定します。

この動作の設定に使用可能なオプションについては、SplitChunksPlugin ページを参照してください。

optimization.sideEffects#

• 型: boolean | 'flag'
• デフォルト:本番モード はtrue、開発モード は'flag'

{
  "name": "npm module",
  "version": "1.0.0",
  "sideEffects": ["**/src/*.js"]
}

エクスポートが使用されていない場合、副作用がないとフラグが付けられたモジュールをスキップするために、Rspack に package.json またはルール内の sideEffects フラグを認識するように指示します。

optimization.sideEffects は、optimization.providedExports が有効になっている必要があります。この依存関係にはビルド時間のコストがかかりますが、モジュールを削除するとコード生成が少なくなるため、パフォーマンスにプラスの影響があります。この最適化の効果はコードベースによって異なります。パフォーマンス向上の可能性があるため、試してみてください。

module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

Rspack に手動で設定された sideEffects フラグ（package.json および module.rule.sideEffects 経由）のみを使用し、ソースコードを分析したくない場合

module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

'flag' 値は、非本番ビルドではデフォルトで使用されます。

optimization.providedExports#

• 型: boolean
• デフォルト:true

有効にすると、Rspack は、再エクスポートされたモジュールを含む、モジュールが提供するエクスポートを分析します。存在しないエクスポートを参照するメンバーをインポートすると、警告またはエラーが発生します。デフォルトでは、optimization.providedExports は有効になっています。この分析はビルド時間を増加させます。開発モードでは、この設定を無効にすることを検討してください。無効にすると、SideEffects セクション で説明されているように、ランタイムの循環依存関係に関連するエラーが発生する可能性があります。

module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.usedExports#

• 型: boolean | 'global'
• デフォルト:本番モード はtrue、開発モード はfalse

Rspack に、各モジュールに使用されるエクスポートを決定するように指示します。これは optimization.providedExports に依存します。 optimization.usedExports によって収集された情報は、他の最適化またはコード生成で使用されます。たとえば、使用されていないエクスポートは生成されず、すべての使用法に互換性がある場合、エクスポート名は単一文字の識別子にマングルされます。ミニマイザーのデッドコードの削除は tästä hyötyä 、使用されていないエクスポートを削除できます。

module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

ランタイムごとに使用済みエクスポート分析からオプトアウトするには

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};

optimization.mangleExports#

• 型: boolean | 'deterministic' | 'size'
• デフォルト:本番モード はdeterministic、開発モード はfalse

optimization.mangleExports を使用すると、エクスポートのマングリングを制御できます。

以下の値がサポートされています

optimization.innerGraph#

• 型: boolean
• デフォルト:本番モード はtrue、開発モード はfalse

optimization.innerGraph は、Rspack に変数代入のより詳細な分析を実行するかどうかを指示します。これにより、Rspack は使用されていないモジュールエクスポートを識別し、バンドルされた出力のサイズを削減できます。

例えば

import { value } from 'lib';

const value2 = value;

function f1() {
  console.log(value);
}

function f2() {
  console.log(value2);
}

ここでは、value を value2 に代入しています。 value2 と value はそれぞれ関数 f2 と f1 内でアクセスされますが、関数は呼び出されないため、value2 と value は実際には使用されず、value のインポートは削除できます。

optimization.concatenateModules#

• 型: boolean
• デフォルト:本番モード はtrue、開発モード はfalse

Rspack に、単一のモジュールに安全に連結できるモジュールグラフのセグメントを見つけるように指示します。optimization.providedExports および optimization.usedExports に依存します。デフォルトでは、optimization.concatenateModules は production モードで有効になり、それ以外の場合は無効になります。

optimization.nodeEnv#

• 型: boolean | string
• デフォルト:false

Rspack に process.env.NODE_ENV を指定された文字列値に設定するように指示します。 optimization.nodeEnv は、false に設定されていない限り、DefinePlugin を使用します。 optimization.nodeEnv は、設定されている場合はmodeにデフォルト設定され、それ以外の場合は 'production' にフォールバックします。

可能な値

• 任意の文字列: process.env.NODE_ENV に設定する値。
• false: process.env.NODE_ENV の値を変更/設定しません。

module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};

optimization.emitOnErrors#

• 型: boolean
• デフォルト:本番モード はfalse、開発モード はtrue

コンパイル中にエラーが発生した場合でもアセットを出力するには、optimization.emitOnErrors を使用します。これにより、エラーが発生したアセットが出力されます。重大なエラーは、生成されたコードに出力され、ランタイムエラーが発生します。