Bundle Size Optimization#

Bundle size optimization is an important part in production build because it directly affects the user experience of online users. In this document, we will introduce some 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 whether there are duplicate dependencies in the project. Rsdoctor will analyze during the build process, find any duplicate bundled dependencies and display them visually:

For more details, see Rsdoctor - Duplicate Dependency Problem.

Eliminate duplicate dependencies#

We can eliminate duplicate dependencies with the 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#

It is recommended to using lightweight libraries in your project, such as replacing moment with day.js.

If you want to find out the large libraries in the project, you can add the BUNDLE_ANALYZE=true environment variable when building:

BUNDLE_ANALYZE=true pnpm build

See the performance.bundleAnalyze configuration for details.

Adjust Browserslist#

The Rsbuild will compile the code according to the project's Browserslist config, and inject some Polyfills. If the project does not need to be compatible with legacy browsers, you can adjust the Browserslist and drop some legacy browsers, thereby reducing the compilation overhead on syntax and polyfill.

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 general front-end projects, the size of image often accounts for a large proportion of the total bundle size of the project.So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in the Rsbuild:

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

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

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

Split Chunk#

A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.

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/,
      },
    },
  },
};