#Improve Build Performance

Modern.js optimizes build performance by default, but as the project becomes larger, you may encounter some build performance problems.

This document provides some optional speed-up strategies, developers can choose some of them to improve the build performance.

#General optimization strategy

The following are some general optimization strategies, which can speed up the development build and production build, and some of them also optimize the bundle size.

#Upgrade Node.js version

In general, updating Node.js to the latest LTS release will help improve build performance.

Modern.js requires Node.js version >= 20.19.5. We strongly recommend using the latest LTS version (such as Node.js 22 LTS) for the best build performance.

You can switch to the latest LTS version by following these steps:

# Install the latest LTS version (e.g., Node.js 22)
nvm install --lts

# Switch to the latest LTS version
nvm use --lts

# Set the latest LTS version as the default
nvm alias default lts/*

# View Node version
node -v

Or install Node.js 22 LTS specifically:

# Install Node.js 22 LTS
nvm install 22 --lts

# Switch to Node.js 22
nvm use 22

# Set Node.js 22 as the default version
nvm alias default 22

# View Node version
node -v

#Development optimization strategies

The following are strategies for improve build performance in development environment.

#Adjust Source Map format

In order to provide a good debugging experience, Modern.js uses the cheap-module-source-map format Source Map by default in the development environment, which is a high-quality Source Map format and will bring certain performance overhead.

You can improve build speed by adjusting the source map format of your development environment.

For example to disable Source Map:

export default {
  tools: {
    bundlerChain(chain, { env }) {
      if (env === 'development') {
        chain.devtool(false);
      }
    },
  },
};

Or set the source map format of the development environment to the cheapest eval format:

export default {
  tools: {
    bundlerChain(chain, { env }) {
      if (env === 'development') {
        chain.devtool('eval');
      }
    },
  },
};

For detailed differences between different Source Map formats, see rspack - devtool.

#Adjust Browserslist for development

This strategy is similar to "Adjust Browserslist", the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead in the development environment.

For example, you can add the following config to package.json, which means that only the latest browsers are compatible in the development environment, and the actual browsers are compatible in the production environment:

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Note that this strategy can lead to some differences in the build result of development production environment.

#Production optimization strategies

The following are strategies for improve build performance in production environment.

#Disable Source Map

If your project does not need Source Map in the production, you can turn it off through the sourcemap config to improve the build speed.

export default {
  output: {
    sourceMap: false,
  },
};

See output.sourceMap for details.