実験的機能#

いくつかの実験的機能を有効にして試すことができます。

• 型: object

experiments.asyncWebAssembly#

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

更新された仕様に従って新しいWebAssemblyをサポートします。これにより、WebAssemblyモジュールが非同期モジュールになります。

module.exports = {
  experiments: {
    asyncWebAssembly: true,
  },
};

experiments.futureDefaultsがtrueに設定されている場合、デフォルトで有効になります。

experiments.outputModule#

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

有効にすると、Rspackは可能な限りECMAScriptモジュール構文を出力します。例えば、チャンクの読み込みには`import()`、チャンクデータの公開にはESMエクスポートなどが使用されます。

module.exports = {
  experiments: {
    outputModule: true,
  },
};

experiments.css#

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

有効にすると、RspackはネイティブCSSサポートと、CSS関連のパーサーおよびジェネレーターオプションを有効にします。

• module.parser["css/auto"]
• module.parser.css
• module.parser["css/module"]
• module.generator["css/auto"]
• module.generator.css
• module.generator["css/module"]

基本例

module.exports = {
  experiments: {
    css: true,
  },
};

experiments.futureDefaults#

次のメジャーRspackのデフォルトを使用し、問題のある箇所には警告を表示します。

module.exports = {
  experiments: {
    futureDefaults: true,
  },
};

experiments.topLevelAwait#

トップレベルawaitのサポートを有効にします。トップレベルawaitは、ModuleTypeがjavascript/esmであるモジュールでのみ使用できます。

デフォルトで有効になっており、この設定で無効にすることができます。

module.exports = {
  experiments: {
    topLevelAwait: false,
  },
};

experiments.lazyCompilation#

• タイプ: boolean | LazyCompilationOptions
• デフォルト: false

type LazyCompilationOptions =
  | boolean
  | {
      backend?: {
        /**
         * A custom client.
         */
        client?: string;
        /**
         * Specify where to listen to from the server.
         */
        listen?: number | ListenOptions;
        /**
         * Specify the protocol the client should use to connect to the server.
         */
        protocol?: 'http' | 'https';
      };
      /**
       * Enable lazy compilation for entries.
       */
      entries?: boolean;
      /**
       * Enable lazy compilation for dynamic imports.
       */
      imports?: boolean;
      /**
       * Specify which imported modules should be lazily compiled.
       */
      test?: RegExp | ((m: Module) => boolean);
    };

遅延コンパイルを有効にします。これにより、多ページアプリケーション（MPA）や大規模なシングルページアプリケーション（SPA）の開発時の起動パフォーマンスを大幅に向上させることができます。たとえば、エントリーポイントが20個ある場合、アクセスされたエントリーポイントのみがビルドされます。あるいは、プロジェクトに多くのimport()文がある場合、import()によって参照される各モジュールは、実際にアクセスされたときのみビルドされます。

trueに設定すると、遅延コンパイルはエントリーモジュールとimport()によって参照されるモジュールの両方にデフォルトで適用されます。設定オブジェクトを使用して、エントリーのみ、またはimport()のみに適用するかどうかを決定できます。entriesオプションはエントリーへの適用を決定し、import()オプションはimport()への適用を決定します。

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  experiments: {
    // only enabled in dev mode
    lazyCompilation: isDev,
  },
};

さらに、どのモジュールを遅延コンパイルするかをより細かく制御するために、testパラメータも設定できます。testパラメータには、遅延コンパイルする必要があるモジュールのみと一致する正規表現を指定できます。また、入力の型が'Module'で、遅延コンパイルロジックの条件を満たすかどうかを示すブール値を返す関数にすることもできます。

experiments.lazyCompilation.backend.listen#

• タイプ: number | ListenOptions

type ListenOptions = {
  port?: number | undefined;
  host?: string | undefined;
  backlog?: number | undefined;
  path?: string | undefined;
  exclusive?: boolean | undefined;
  readableAll?: boolean | undefined;
  writableAll?: boolean | undefined;
  /**
   * @default false
   */
  ipv6Only?: boolean | undefined;
};

HMRクライアントの除外#

Rspack独自の開発サーバーを使用せず、独自のサーバーを開発サーバーとして使用する場合、一般的にHMRなどの機能を有効にするために、エントリー設定に別のクライアントモジュールを追加する必要があります。これらのクライアントモジュールは、testを設定して遅延コンパイルから除外するのが最善です。

除外せず、エントリーの遅延コンパイルを有効にすると、このクライアントはページに初めてアクセスした際にコンパイルされないため、有効にするには追加のリフレッシュが必要です。

例：

const rspack = require('@rspack/core');

const options = {
  experiments: {
    lazyCompilation: {
      test(module) {
        const isMyClient = module.nameForCondition().endsWith('dev-client.js');
        // make sure that dev-client.js won't be lazy compiled
        return !isMyClient;
      },
    },
  },
};
const compiler = rspack(options);

new compiler.webpack.EntryPlugin(compiler.context, 'dev-client.js', {
  // name: undefined means this is global entry
  name: undefined,
}).apply(compiler);

experiments.layers#

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

レイヤー機能を有効にするかどうかを制御します。レイヤーは、モジュールグラフ内のモジュールから始まる部分グラフ内のすべてのモジュールに識別子プレフィックスを追加して、異なるレイヤーのモジュールと区別することができます。例：

index.jsモジュールのlayerはデフォルトでnullであり、そのidentifierは./index.jsです。これにlayer = 'client'を設定すると、そのidentifierは(client)/./index.jsになります。この時点で、これら2つの異なるレイヤーのindex.jsモジュールは、一意のidentifierが異なるため、別個のモジュールとして扱われます。その結果、最終的な出力には両方のモジュールの成果物が含まれます。

デフォルトでは、モジュールのレイヤーはnullであり、親モジュールのレイヤーを継承します。entryOptions.layerを使用してエントリーモジュールにレイヤーを追加し、module.rule[].layerを使用して一致するモジュールにレイヤーを追加できます。さらに、module.rule[].issuerLayerを使用して親モジュールのレイヤーに基づいて一致させることができます。

module.exports = {
  experiments: {
    layers: true,
  },
};

experiments.rspackFuture#

• 型: object

• デフォルト: 詳細については以下のオプションを参照してください。

Rspackの将来のデフォルトオプションを有効にするかどうかを制御するために使用されます。詳細についてはこちらをご覧ください。

experiments.rspackFuture.bundlerInfo#

• タイプ:

  type BundlerInfo = {
    version?: string,
    bundler?: string,
    force?: ('version' | 'uniqueId')[] ｜ boolean;
  };

現在使用されているRspack情報を生成されたアセットに注入するために使用されます。

• version: Rspackのバージョンを指定するために使用され、@rspack/core/package.jsonのversionフィールドをデフォルトとします。
• bundler: パッケージングツールの名前を指定するために使用され、デフォルトはrspackです。
• force: Rspack情報の注入を強制するかどうかを指定します。これはランタイムモジュールとしてチャンクに追加され、デフォルトではtrueに設定され、注入が強制されます。強制的に注入する項目を選択するために配列を使用できます。

デフォルト注入の無効化#

forceをfalseに設定することで、デフォルトの注入を無効にできます。その後、注入はコード内で__rspack_version__と__rspack_unique_id__が検出された場合にのみ行われます。

• __rspack_version__: バージョン情報を注入します。
• __rspack_unique_id__: バンダーの一意のIDを注入します。

module.exports = {
  experiments: {
    rspackFuture: { bundlerInfo: { force: false } },
  },
};