Experiments

experiments

boolean: false

experiments option was introduced in webpack 5 to empower users with the ability to activate and try out experimental features.

Available options:

• syncWebAssembly: Support the old WebAssembly like in webpack 4
• asyncWebAssembly: Support the new WebAssembly according to the updated specification, it makes a WebAssembly module an async module
• topLevelAwait: Support the Top Level Await Stage 3 proposal, it makes the module an async module when await is used on the top-level
• outputModule: enables the use of output.module configuration option and sets it to true. Enables the use of output.libraryTarget as 'module' and sets it to 'module'.
• layers: Enable module and chunk layers.
• lazyCompilation: Compile entrypoints and dynamic imports only when they are in use.

webpack.config.js

module.exports = {
  //...
  experiments: {
    outputModule: true,
    syncWebAssembly: true,
    topLevelAwait: true,
    asyncWebAssembly: true,
    layers: true,
    lazyCompilation: true,
  },
};

experiments.lazyCompilation

Compile entrypoints and dynamic imports only when they are in use. It can be used for either Web or Node.js.

• Type

  • boolean
  • object

    {
      // define a custom backend
      backend?: ((
        compiler: webpack.Compiler,
        client: string,
        callback: (err?: Error, api?: any) => void
      ) => void)
      | ((
          compiler: webpack.Compiler,
          client: string
        ) => Promise<any>)
      client?: string,
      entries?: boolean,
      imports?: boolean,
      test?: RegExp | string | ((module: import("../lib/Module")) => boolean)
    }

    • client: Path to a custom client, defaults to webpack/hot/lazy-compilation-{node|web}.js.
    • backend: Customize the backend, defaults to webpack/lib/hmr/lazyCompilationBackend.
    • entries: Enable lazy compilation for entries.
    • imports 5.20.0+: Enable lazy compilation for dynamic imports.
    • test 5.20.0+: Specify which imported modules should be lazily compiled.

• Available: 5.17.0+

• Example 1:

  module.exports = {
    // …
    experiments: {
      lazyCompilation: true,
    },
  };

• Example 2:

  module.exports = {
    // …
    experiments: {
      lazyCompilation: {
  
        // disable lazy compilation for dynamic imports
        imports: false,
  
        // disable lazy compilation for entries
        entries: false,
  
        // do not lazily compile moduleB
        test: module => !/moduleB/.test(module.nameForCondition()),
      },
    },
  };

---

Contributors

EugeneHlushko wizardofhogwarts chenxsan anshumanv