實驗#

啟用並試用一些實驗性功能。

• 類型： 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）的開發啟動效能。例如，如果您有二十個入口點，只會建置被存取的入口點。或者，如果專案中有許多 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。此時，這兩個不同圖層中的 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 資訊，這將作為執行階段模組新增到 chunk 中，預設值為 true 以強制注入。可以使用陣列來選擇要強制注入的項目。

停用預設注入#

可以透過將 force 設定為 false 來停用預設注入。然後，僅當在程式碼中檢測到 __rspack_version__ 和 __rspack_unique_id__ 時才會進行注入

• __rspack_version__：注入版本資訊。
• __rspack_unique_id__：注入打包工具的唯一 ID。

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