#Bundle size optimization

Bundle size optimization is important for production builds because it directly affects user experience. This document covers common bundle size optimization methods in Rsbuild.

#Reduce duplicate dependencies

Web applications commonly bundle multiple versions of third-party dependencies. Duplicate dependencies increase bundle size and slow down builds.

#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 forces specified packages to resolve from the project root directory, 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 duplicate dependencies, then update dependencies or declare pnpm overrides to merge them.

npx pnpm-deduplicate --list

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

npx yarn-deduplicate && yarn

#Use lightweight libraries

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

To identify large libraries in your 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 compiles code based on your project's browserslist config and injects polyfills. If your project doesn't need to support legacy browsers, adjust the browserslist to drop support for older browsers, reducing 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'];

#Use polyfill on demand

If your project's output.polyfill is set to 'entry' and you're certain that third-party dependencies don't require additional polyfills, change it to usage.

In usage mode, Rsbuild analyzes the syntax in source code and injects only the required polyfills, reducing polyfill size.

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

#Image compression

In typical front-end projects, images often account for a large portion of total bundle size. Reducing image size significantly improves overall bundle size. 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/,
      },
    },
  },
};