dev.lazyCompilation#

• Type:

type LazyCompilationOptions =
  | boolean
  | {
      /**
       * 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);
    };

• Default: false
• Version: >= 1.3.0

Enable lazy compilation (compilation on demand), implemented based on Rspack's lazy compilation feature.

Introduction#

Although Rspack itself has good performance, the overall build time can still be less than ideal when building applications with a large number of modules. This is because the modules in the application need to be compiled by various loaders, such as postcss-loader, sass-loader, vue-loader, etc., which introduce additional compilation overhead.

Lazy compilation is an effective strategy to improve the startup performance of the development phase. Instead of compiling all modules at initialization, it compiles modules on demand as they're needed. This means that developers can quickly see the application running when starting the dev server, and build the required modules in batches. By compiling on demand, unnecessary compilation time can be reduced. As the project scales up, compilation time does not significantly increase, which greatly enhances the development experience.

Example#

Enable lazy compilation#

export default {
  dev: {
    lazyCompilation: true,
  },
};

This is equivalent to the following configuration:

export default {
  dev: {
    lazyCompilation: {
      imports: true,
      entries: true,
    },
  },
};

Entry modules#

Use lazyCompilation.entries to control whether to lazily compile entry modules:

export default {
  dev: {
    lazyCompilation: {
      entries: true,
    },
  },
};

With the entries option enabled, Rsbuild will not compile all pages when you start the dev server. Instead, it will only compile a specific page when you visit it.

When lazily compiling entry modules, please note:

• It only applies to multi-page applications (MPA) and does not optimize single-page applications (SPA).
• When you visit a page, you need to wait for the page to finish compiling before you can see its content.

Async modules#

Use lazyCompilation.imports to control whether to lazily compile dynamic imported modules.

export default {
  dev: {
    lazyCompilation: {
      imports: true,
    },
  },
};

When the imports option is enabled, all async modules will only be compiled when requested. If your project is a single-page application (SPA) and you have split the routes using dynamic import, this will significantly speed up the startup time.