CC 4.0 协议

本节内容派生于以下链接指向的内容，并遵守 CC BY 4.0 许可证的规定。
https://webpack.js.org/configuration/experiments/
以下内容如果没有特殊声明，可以认为都是基于原内容的修改和删减后的结果。

Experiments

该选项允许用户开启和尝试一些实验性的功能。

类型： object

Tip

在 minor release 中，Rspack 可能对这些实验性特性的 public API 做一些调整，并在更新日志中对这些变动进行详细的说明。因此，如果你使用了实验性特性，请留意 minor 版本的更新日志。

experiments.asyncWebAssembly

类型： boolean
默认值： true

支持基于新规范的 WebAssembly，这使 WebAssembly 模块成为异步模块。

rspack.config.mjs

export default {
  experiments: {
    asyncWebAssembly: true,
  },
};

experiments.outputModule

类型： boolean
默认值： false

开启之后，将尽可能输出符合 ECMAScript 语法的代码。例如，使用 import() 加载 chunk，使用 ESM exports 等等。

rspack.config.mjs

export default {
  experiments: {
    outputModule: true,
  },
};

experiments.css

Stability: Deprecated

类型： boolean
默认值： false

已弃用

此选项在 Rspack 2.0 中已弃用。现在手动添加 CSS type 将模块标记为 CSS 模块。

迁移

要在 Rspack 2.0 中使用 CSS，需要手动添加 CSS 规则到配置中：

rspack.config.mjs

export default {
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: 'css/auto',
      },
    ],
  },
};

旧用法（已弃用）

rspack.config.mjs

export default {
  experiments: {
    css: true,
  },
};

experiments.futureDefaults

类型： boolean
默认值： false

使用下一个主版本 Rspack 的默认值，并在任何有问题的地方显示警告。

rspack.config.mjs

export default {
  experiments: {
    futureDefaults: true,
  },
};

experiments.incremental

Stability: Deprecated

此选项已移动至顶层 incremental。

experiments.buildHttp

Added in v1.3.0

类型： HttpUriOptions
默认值： undefined

type HttpUriOptions = {
  /**
   * A list of allowed URIs
   */
  allowedUris: (string | RegExp)[];
  /**
   * Define the location to store the lockfile
   */
  lockfileLocation?: string;
  /**
   * Define the location for caching remote resources
   */
  cacheLocation?: string | false;
  /**
   * Detect changes to remote resources and upgrade them automatically
   * @default false
   */
  upgrade?: boolean;
  /**
   * Custom http client
   */
  httpClient?: (
    url: string,
    headers: Record<string, string>,
  ) => Promise<{
    status: number;
    headers: Record<string, string>;
    body: Buffer;
  }>;
};

启用此功能后，Rspack 可以构建以 http(s): 协议开头的远程资源。Rspack 会将资源下载到本地，然后再进行打包。

默认情况下，Rspack 会在 context 文件夹下生成 rspack.lock 和 rspack.lock.data 分别作为 Lockfile 和缓存的位置，你也可以通过 lockfileLocation 和 cacheLocation 进行配置。

Note

你应该将 lockfileLocation 和 cacheLocation 的文件提交到版本控制系统中，这样在生产构建期间不会发出网络请求。

示例：

rspack.config.mjs

export default {
  experiments: {
    buildHttp: {
      allowedUris: ['https://'],
      lockfileLocation: path.join(__dirname, 'my_project.lock'),
      cacheLocation: path.join(__dirname, 'my_project.lock.data'),
    },
  },
};

启用此功能后，你可以直接从网址导入模块：

// Import from a remote URL
import { something } from 'https://example.com/module.js';

// Or import assets
import imageUrl from 'https://example.com/image.png';

experiments.useInputFileSystem

Added in v1.3.14

类型： false | RegExp[]
默认值： false

默认情况下，Rspack 使用原生文件系统从磁盘读取文件。但你也可以通过更换 inputFileSystem，使用其他类型的文件系统。例如，可以用 memfs 替代默认文件系统来支持虚拟模块。

不过，由于调用 Node.js 实现的文件系统存在性能开销，会显著拖慢 Rspack 的运行速度。因此，Rspack 提供了 useInputFileSystem 配置项，用于控制是使用原生文件系统还是自定义的 inputFileSystem。一般项目中，只有少量文件需要通过自定义文件系统访问，合理配置 experiments.useInputFileSystem 可以确保 Rspack 高效运行。

下面的例子演示了如何替换默认的 inputFileSystem 为一个自定义的文件系统，只要自定义文件系统满足 InputFileSystem 的接口定义。更多细节参考测试用例。

rspack.config.mjs

export default {
  entry: {
    index: './virtual_index.js',
  },
  plugins: [
    {
      apply: (compiler) => {
        compiler.hooks.beforeCompile.tap('SimpleInputFileSystem', () => {
          compiler.inputFileSystem = {
            readFile(path, cb) {
              cb(null, `// the file content`);
            },
            stat(p, cb) {
              cb(null, fsState);
            },
          };
        });
      },
    },
  ],
  experiments: {
    useInputFileSystem: [/virtual_.*\.js/],
  },
};

注意

只有在 compiler.run 执行前替换的 compiler.inputFileSystem 才会生效；在 compiler.run 执行后替换将不会生效。

配合 webpack-virtual-modules 使用

例子：

rspack.config.mjs

import VirtualModulesPlugin from 'webpack-virtual-modules';

var virtualModules = new VirtualModulesPlugin({
  'virtual_entry.js': `
    require("./src/another_virtual.js");
    require("./src/disk_file.js")
    `,
  'src/another_virtual.js': 'module.exports = 42',
});

export default {
  entry: './virtual_entry.js',
  plugins: [virtualModules],
  experiments: {
    useInputFileSystem: [/.*virtual.*\.js$/],
  },
};

当访问 virtual_entry.js 和 src/another_virtual.js 时，它们匹配了 experiments.useInputFileSystem 中的正则规则，Rspack 会通过 VirtualModulesPlugin 包装的输入文件系统读取它们；而像 src/disk_file.js，则会使用原生文件系统读取。

experiments.nativeWatcher

Added in v1.4.7

类型： boolean
默认值： false

默认情况下，Rspack 使用 Watchpack 来监听文件变化，这在大多数情况下都能正常工作，但在某些特定的环境下可能会出现问题。例如在大量文件变化时，Watchpack 可能会出现性能问题, 更多详情请参考 Watchpack issue #233。

如果你使用默认的 watcher 出现性能问题，可以尝试启用 nativeWatcher。

启用 nativeWatcher 后，Rspack 将使用 Rust Native 文件系统监听文件变化，实现增量监听文件变更能力，这提供更好的性能和稳定性。

rspack.config.mjs

export default {
  watchOptions: {
    // Other watch options...
  }
  experiments: {
    nativeWatcher: true,
  },
};

experiments.deferImport

Added in v1.6.0

类型： boolean
默认值： false

开启后 Rspack 会支持打包 Deferred Imports Evaluation 提案，该功能允许延迟模块的执行直到首次使用。目前仅支持 import defer * as ns from "./module"，import.defer() 会在后续版本支持。

rspack.config.mjs

export default {
  experiments: {
    deferImport: true,
  },
};

#Experiments

#experiments.asyncWebAssembly

#experiments.outputModule

#experiments.css

#迁移

#旧用法（已弃用）

#experiments.futureDefaults

#experiments.incremental

#experiments.buildHttp

#experiments.useInputFileSystem

#配合 webpack-virtual-modules 使用

#experiments.nativeWatcher

#experiments.deferImport

Experiments

experiments.asyncWebAssembly

experiments.outputModule

experiments.css

迁移

旧用法（已弃用）

experiments.futureDefaults

experiments.incremental

experiments.buildHttp

experiments.useInputFileSystem

配合 webpack-virtual-modules 使用

experiments.nativeWatcher

experiments.deferImport