Bundle Size Optimization#

Bundle size optimization is an important part in production environment because it directly affects the user experience of online users. In this document, we will introduce some common bundle size optimization methods in Modern.js.

Reduce duplicate dependencies#

In real projects, there will be some third-party dependencies installed with multiple versions. Duplicate dependencies can lead to larger bundles and slower builds.

We can detect or eliminate duplicate dependencies with some community tools.

• 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#

Modern.js 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.

Modern.js's default Browserslist config is:

['> 0.01%', 'not dead', 'not op_mini all'];

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

['Chrome >= 61'];

Usage polyfill#

When it is clear that third-party dependencies do not require additional polyfill, you can set output.polyfill to usage.

In usage mode, Modern.js 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 Modern.js:

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

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

See details in 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.

A variety of chunk splitting strategies are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.

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