#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);
      /**
       * The path to a custom runtime code that overrides the default lazy compilation client.
       */
      client?: string;
      /**
       * Tells the client the server URL that needs to be requested.
       */
      serverUrl?: string;
    };

• Default:

const defaultOptions = {
  imports: true,
  entries: false,
};

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 are 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,
      // If there is only one entry, Rsbuild will not enable the entries option by default
      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.

#Server URL

Use lazyCompilation.serverUrl to tell the client the server URL that needs to be requested.

export default {
  dev: {
    lazyCompilation: {
      serverUrl: 'http://localhost:<port>',
    },
  },
};

#Version history