Configure SWC#

SWC (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on Rust. SWC provides similar functionality to Babel and Terser, and it is 20x faster than Babel on a single thread and 70x faster on four cores.

Rsbuild enables the following SWC features by default:

• Transform JavaScript and TypeScript code using Rspack's builtin:swc-loader, which is the Rust version of swc-loader.
• Minify JavaScript code using Rspack's SwcJsMinimizerRspackPlugin.

Loader Options#

The options for builtin:swc-loader are consistent with the JS version of swc-loader. Rsbuild provides the tools.swc option to configure builtin:swc-loader. Here are some examples:

Register SWC Plugin#

tools.swc can be used to register SWC's Wasm plugins, for example, registering @swc/plugin-styled-components:

export default {
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-styled-components', {}]],
        },
      },
    },
  },
};

You can check out the awesome-swc repository to see the SWC plugins available in the community.

SWC Plugin Version#

Please note that the SWC plugin is still an experimental feature, and the SWC Wasm plugin is currently not backward compatible. The version of the SWC plugin is closely tied to the version of swc_core that Rspack depends on.

This means that you must to choose an SWC plugin that matches the current version of swc_core to ensure that it works properly. If the version of the SWC plugin you are using does not match the version of swc_core that Rspack depends on, Rspack will throw the following error during the build process:

1: failed to run Wasm plugin transform. Please ensure the version of `swc_core`
   used by the plugin is compatible with the host runtime.

If you encounter the above issues, a common solution is to upgrade both the Rsbuild and SWC plugins to the latest versions.

Alternatively, you can follow these steps to select a suitable SWC plugin version:

1. Check the current version of Rspack you are using, this can be done by enabling debug mode.
2. Visit plugins.swc.rs and select the version of Rspack you are currently using.
3. The website will list the range of SWC plugin versions that match to your current Rspack version. Then select the matched version of the SWC plugin to use.

If the SWC plugin you are using is not listed on plugins.swc.rs, you can find the version information of swc_core in the Cargo.toml file within the Rust code repository. For example, in the Rspack repository, you can open Cargo.toml and search for the keyword swc_core to find the version. Then read SWC - Selecting the version for further guidance.

Enable Emotion Support#

Example of enabling the Emotion support using the builtin:swc-loader:

export default {
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-emotion', {}]],
        },
      },
    },
  },
};

For more options, please refer to @swc/plugin-emotion.

Enable Relay Support#

Example of enabling the Relay support using the builtin:swc-loader:

export default {
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-relay', {}]],
        },
      },
    },
  },
};

For more options, please refer to @swc/plugin-relay.

Minimizer Options#

Rsbuild provides the output.minify.js option to configure the SwcJsMinimizerRspackPlugin. Here are some examples:

Exclude Files#

You can exclude certain files from being minified using the exclude option:

export default {
  output: {
    minify: {
      jsOptions: {
        exclude: /foo\/bar/,
      },
    },
  },
};

Switching Minimizer#

If the SwcJsMinimizerRspackPlugin does not meet your needs, you can switch to other minimizers through the tools.bundlerChain option.

For example, to switch to Terser for minifying JavaScript, which is more stable but performs worse compared to SWC:

export default {
  tools: {
    bundlerChain(chain, { CHAIN_ID, isProd }) {
      if (isProd) {
        chain.optimization.minimizer(CHAIN_ID.MINIMIZER.JS).use(TerserPlugin, [
          {
            minify: TerserPlugin.terserMinify,
          },
        ]);
      }
    },
  },
};