#Bundle size optimization

Bundle size optimization is an important part of production builds because it directly affects the user experience. This document introduces common bundle size optimization methods in Rsbuild.

#Reduce duplicate dependencies

It is common for web projects to bundle multiple versions of third-party dependencies. Duplicate dependencies can lead to increased bundle size and slower build speed.

#Detect duplicate dependencies

You can use Rsdoctor to detect duplicate dependencies in your project. Rsdoctor analyzes the build, finds duplicate bundled dependencies, and displays them visually:

For more details, see Rsdoctor - Duplicate Dependency Problem.

#Eliminate duplicate dependencies

You can eliminate duplicate dependencies using your package manager.

• Rsbuild provides the resolve.dedupe config, which allows you to force the specified packages to be resolved from the project root directory, thereby removing duplicate packages.

• If you are using pnpm >= 7.26.0, you can use the pnpm dedupe command to upgrade and eliminate duplicate dependencies.

pnpm dedupe

• If you are using pnpm < 7.26.0, you can use pnpm-deduplicate to analyze all duplicate dependencies, then update dependencies or declare pnpm overrides to merge duplicated dependencies.

npx pnpm-deduplicate --list

• If you are using yarn, you can use yarn-deduplicate to automatically merge duplicated dependencies:

npx yarn-deduplicate && yarn

#Use lightweight libraries

We recommend using lightweight libraries in your project, such as replacing moment with day.js.

To find out the large libraries in the project, add the BUNDLE_ANALYZE=true environment variable when building:

BUNDLE_ANALYZE=true pnpm build

See the performance.bundleAnalyze configuration for details.

#Adjust browserslist

Rsbuild will compile the code based on the project's browserslist config and inject some polyfills. If your project doesn't need to support legacy browsers, you can adjust the browserslist to drop support for older browsers, reducing the compilation overhead for syntax transformation and polyfills.

Rsbuild's default Browserslist config is:

['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];

For example, if you only need to be compatible with browsers above Chrome 100, you can change it to:

['Chrome >= 100'];

#Usage polyfill

If the current project's output.polyfill is set to 'entry', and you are certain that third-party dependencies do not require additional polyfills, you can change it to usage.

In usage mode, Rsbuild analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill.

export default {
  output: {
    polyfill: 'usage',
  },
};

#Image compression

In typical front-end projects, images often account for a large proportion of the total bundle size. Reducing image size can significantly improve bundle size. You can enable image compression by registering a plugin in Rsbuild:

import { pluginImageCompress } from '@rsbuild/plugin-image-compress';

export default {
  plugins: [pluginImageCompress()],
};

See details in @rsbuild/plugin-image-compress.

#Split chunk

A good chunk splitting strategy is important for improving application loading performance. It makes full use of the browser's caching mechanism to reduce the number of requests and improve loading speed.

Several chunk splitting strategies are built into Rsbuild. These should meet the needs of most applications. You can also customize the chunk splitting config to suit your own usage scenario.

For example, split the axios library under node_modules into axios.js:

export default {
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
      forceSplitting: {
        axios: /node_modules[\\/]axios/,
      },
    },
  },
};