CC 4.0 License

The content of this section is derived from the content of the following links and is subject to the CC BY 4.0 license.

The following contents can be assumed to be the result of modifications and deletions based on the original contents if not specifically stated.

Optimization

Rspack will select appropriate optimization configuration based on the mode. You can also customize the configuration via optimization.

optimization.moduleIds

Tells Rspack which algorithm to use when generating module ids.

The following string values are supported:

option description
natural Use numeric ids in order of usage.
named Use meaningful, easy-to-debug content as id.
deterministic Use the hashed module identifier as the id to benefit from long-term caching. By default a minimum length of 3 digits is used.
rspack.config.js
module.exports = {
  optimization: {
    moduleIds: 'deterministic',
  },
};

The deterministic option is useful for long term caching, and results in smaller bundles compared to hashed. Length of the numeric value is chosen to fill a maximum of 80% of the id space. By default a minimum length of 3 digits is used when optimization.moduleIds is set to deterministic.

optimization.chunkIds

Tells Rspack which algorithm to use when generating chunk ids.

The following string values are supported:

option description
'natural' Use numeric ids in order of usage.
'named' Readable ids for better debugging.
'deterministic' Short numeric ids which will not be changing between compilation. Good for long term caching. By default a minimum length of 3 digits is used.
'size' Use numeric ids to make the initial download package smaller.
'total-size' Use numeric ids to make the overall download package smaller.
rspack.config.js
module.exports = {
  optimization: {
    chunkIds: 'deterministic',
  },
};

optimization.mergeDuplicateChunks

  • Type: boolean
  • Default:true

Whether to merge chunks which contain the same modules. Setting optimization.mergeDuplicateChunks to false will disable this optimization.

rspack.config.js
module.exports = {
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

Whether to use the minimizer declared in optimization.minimizer to minimize the bundle.

rspack.config.js
module.exports = {
  optimization: {
    minimize: true,
  },
};

optimization.minimizer

  • Type: Array<Plugin>
  • Default:[new SwcJsMinimizerRspackPlugin(), new LightningCssMinimizerRspackPlugin()]

Customize the minimizer. By default, rspack.SwcJsMinimizerRspackPlugin and rspack.LightningCssMinimizerRspackPlugin are used.

When optimization.minimizer is specified, the default minimizers will be disabled.

rspack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

Use Rspack's built-in minimizer with custom options:

rspack.config.js
const rspack = require('@rspack/core');

module.exports = {
  optimization: {
    // when `optimization.minimizer` is specified, the default minimizers are disabled by default
    // but you can use '...', it represents the default minimizers
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          format: {
            comments: false,
          },
        },
      }),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: {
          errorRecovery: false,
        },
      }),
    ],
  },
};

optimization.removeEmptyChunks

  • Type: boolean
  • Default:true

Detect and remove empty chunks generated in the compilation. Setting optimization.removeEmptyChunks to false will disable this optimization.

rspack.config.js
module.exports = {
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

  • Type: boolean | string | { name: string } | { name: (entrypoint: { name: string }) => string }
  • Default:false

Used to control how the Rspack's runtime chunk is generated.

Defaults to false, which means the runtime code is inlined into the entry chunks.

Setting it to true or 'multiple' will add an additional chunk containing only the runtime for each entry point. This setting is an alias for:

rspack.config.js
module.exports = {
  optimization: {
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`,
    },
  },
};

Setting it to 'single' will extract the runtime code of all entry points into a single separate chunk. This setting is an alias for:

rspack.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'runtime',
  },
};

By setting optimization.runtimeChunk to an object it can provide the name property which stands for the name for the runtime chunks.

rspack.config.js
module.exports = {
  optimization: {
    runtimeChunk: {
      // this will generate a chunk named `my-name.js`
      name: 'my-name',
    },
  },
};
TIP

Imported modules are initialized for each runtime chunk separately, so if you include multiple entry chunks on a page, beware of this behavior. You will need to set optimization.runtimeChunk to 'single' or use another configuration that ensures the page only contains one runtime instance.

optimization.realContentHash

Adds an additional hash compilation pass after the assets have been processed to get the correct asset content hashes. This feature will enable by default in production mode.

If realContentHash is set to false, internal data is used to calculate the hash and it can change when assets are identical in some cases.

rspack.config.js
module.exports = {
  //...
  optimization: {
    realContentHash: true,
  },
};

optimization.splitChunks

  • Type: false | object

Rspack supports splitting chunks with the optimization.splitChunks configuration item.

It is enabled by default for dynamically imported modules.

To turn it off, set it to false.

See available options for configuring this behavior in the SplitChunksPlugin page.

optimization.sideEffects

{
  "name": "npm module",
  "version": "1.0.0",
  "sideEffects": ["**/src/*.js"]
}

Tells Rspack to recognise the sideEffects flag in package.json or rules to skip over modules which are flagged to contain no side effects when exports are not used.

TIP

Please note that sideEffects should be in the npm module's package.json file and doesn't mean that you need to set sideEffects to false in your own project's package.json which requires that npm module.

optimization.sideEffects depends on optimization.providedExports to be enabled. This dependency has a build time cost, but eliminating modules has positive impact on performance because of less code generation. Effect of this optimization depends on your codebase, try it for possible performance wins.

rspack.config.js
module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

If you only want Rspack use the manual sideEffects flag via (package.json and module.rule.sideEffects) and don't analyse source code:

rspack.config.js
module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

The 'flag' value is used by default in non-production builds.

TIP

When optimization.sideEffects is true , Rspack will also flag modules as side effect free when they contain only side effect free statements.

optimization.providedExports

  • Type: boolean
  • Default:true

After enabling, Rspack will analyze which exports the module provides, including re-exported modules. A warning or error will be issued when importing members that reference non-existent exports. By default, optimization.providedExports is enabled. This analysis will increase build time. You may consider disabling this configuration in development mode. Disabling it may lead to errors related to runtime circular dependencies as mentioned in the SideEffects section.

rspack.config.js
module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.usedExports

Tells Rspack to determine used exports for each module. This depends on optimization.providedExports. Information collected by optimization.usedExports is used by other optimizations or code generation i.e. Exports are not generated for unused exports, export names are mangled to single char identifiers when all usages are compatible. Dead code elimination in minimizers will benefit from this and can remove unused exports.

rspack.config.js
module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

To opt-out from used exports analysis per runtime:

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};

optimization.mangleExports

optimization.mangleExports allows to control export mangling.

The following values are supported:

option description
'named' Use meaningful, easy-to-debug content as id. This option is enabled by default in development mode
'deterministic' Use the hashed module identifier as the id to benefit from long-term caching. This option is enabled by default in production mode
true Same as 'deterministic'
false Keep original name. Good for readability and debugging.

optimization.innerGraph

optimization.innerGraph tells Rspack whether to perform a more detailed analysis of variable assignments. This helps Rspack to identify unused module exports, thereby reducing the size of the bundled output.

For example:

import { value } from 'lib';

const value2 = value;

function f1() {
  console.log(value);
}

function f2() {
  console.log(value2);
}

Here we assign the value to value2. Both value2 and value are accessed within the functions f2 and f1 respectively, but the functions are not called, hence value2 and value are not actually used, thus the import of value can be removed.

optimization.concatenateModules

Tells Rspack to find segments of the module graph which can be safely concatenated into a single module. Depends on optimization.providedExports and optimization.usedExports. By default optimization.concatenateModules is enabled in production mode and disabled elsewise.

optimization.nodeEnv

  • Type: boolean | string
  • Default:false

Tells Rspack to set process.env.NODE_ENV to a given string value. optimization.nodeEnv uses DefinePlugin unless set to false. optimization.nodeEnv defaults to mode if set, else falls back to 'production'.

Possible values:

  • any string: the value to set process.env.NODE_ENV to.
  • false: do not modify/set the value of process.env.NODE_ENV.
rspack.config.js
module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};
TIP

When mode is set to 'none', optimization.nodeEnv defaults to false.

optimization.emitOnErrors

Use the optimization.emitOnErrors to emit assets whenever there are errors while compiling. This ensures that erroring assets are emitted. The errors are emitted into the generated code and will cause errors at runtime.

rspack.config.js
module.exports = {
  optimization: {
    emitOnErrors: true,
  },
};