close
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

mode

  • Type: 'production' | 'development' | 'none'
  • Version: >= 1.0.0

Specify the build mode for Rsbuild, as each mode has different default behavior and optimizations. For example, the production mode will compress code by default.

The value of Rsbuild mode is also be passed to the mode configuration of Rspack.

TIP

The value of mode does not affect the loading results of the .env file, as the .env file is resolved before the Rsbuild configuration file.

Rsbuild CLI supports using the --env-mode option to specify the env mode. See "Env mode" for more details.

Default Values

The default value of mode depends on the process.env.NODE_ENV environment variable:

  • If NODE_ENV is production, the default value is production.
  • If NODE_ENV is development, the default value is development.
  • If NODE_ENV has any other value, the default value is none.

If you set the value of mode, the value of NODE_ENV will be ignored.

rsbuild.config.ts
export default {
  mode: 'production',
};

Command Line

When using Rsbuild's command line:

  • rsbuild dev will set the default values of NODE_ENV and mode to development.
  • rsbuild build and rsbuild preview will set the default values of NODE_ENV and mode to production.

JavaScript API

When using Rsbuild's JavaScript API:

Development Mode

If the value of mode is development:

  • Enable HMR and register the HotModuleReplacementPlugin.
  • Generate JavaScript source maps, but do not generate CSS source maps. See output.sourceMap for details.
  • The process.env.NODE_ENV in the source code will be replaced with 'development'.
  • The import.meta.env.MODE in the source code will be replaced with 'development'.
  • The import.meta.env.DEV in the source code will be replaced with true.
  • The import.meta.env.PROD in the source code will be replaced with false.

Production Mode

If the value of mode is production:

  • Enable JavaScript code minification and register the SwcJsMinimizerRspackPlugin.
  • Enable CSS code minification and register the LightningCssMinimizerRspackPlugin.
  • Generated JavaScript and CSS filenames will have hash suffixes, see output.filenameHash.
  • Generated CSS Modules classnames will be shorter, see cssModules.localIdentName.
  • Do not generate JavaScript and CSS source maps, see output.sourceMap.
  • The process.env.NODE_ENV in the source code will be replaced with 'production'.
  • The import.meta.env.MODE in the source code will be replaced with 'production'.
  • The import.meta.env.DEV in the source code will be replaced with false.
  • The import.meta.env.PROD in the source code will be replaced with true.

None Mode

If the value of mode is none:

  • Do not enable any optimizations.
  • The process.env.NODE_ENV in the source code will not be replaced.
  • The import.meta.env.MODE in the source code will be replaced with 'none'.
  • The import.meta.env.DEV in the source code will be replaced with false.
  • The import.meta.env.PROD in the source code will be replaced with false.