提升构建性能#

Rsbuild 默认对构建性能进行了充分优化，但是随着业务场景变复杂、项目代码量变大，你可能会遇到一些构建性能的问题。

本文档提供了一些可选的提速策略，开发者可以根据实际场景选取其中的部分策略，从而进一步提升构建速度。

性能分析#

进行性能分析可以帮助你确定项目中的性能瓶颈，从而采取针对性的优化。

Node.js Profiling#

通常而言，JS 侧的性能开销会大于 Rust 侧的性能开销，你可以使用 Node.js Profiling 分析 JS 侧的开销。

在项目根目录执行以下命令：

# dev
node --cpu-prof ./node_modules/@rsbuild/core/bin/rsbuild.js dev

# build
node --cpu-prof ./node_modules/@rsbuild/core/bin/rsbuild.js build

以上命令执行后会生成一个 cpuprofile 文件，我们可以使用 speedscope 来可视化查看该文件：

# 安装 speedscope
npm install -g speedscope

# 查看 cpuprofile 内容
# 请将文件名替换为本地文件的名称
speedscope CPU.date.000000.00000.0.001.cpuprofile

通用优化策略#

以下是一些通用的优化策略，对开发环境和生产环境均有提速效果，其中部分策略对包体积也有优化。

升级 Node.js 版本#

通常来说，将 Node.js 更新到最新的 LTS 版本，有助于提升构建性能。

尤其是对于 Apple M1/M2 芯片的机型，推荐使用 Node 18 进行构建。

Node >= 16 默认提供了 Apple Silicon binaries，因此在 M1/M2 机型上性能会比 Node 14 有大幅度提升。根据我们的测试，从 Node 14 切换到 Node >= 16 后，编译速度可以提升 100% 以上。

你可以通过以下步骤来切换到 Node 18：

# 安装 Node v18
nvm install 18

# 切换到 Node 18
nvm use 18

# 将 Node 18 设置为默认版本
nvm default 18

# 查看 Node 版本
node -v

开发环境优化策略#

以下是针对开发环境进行提速的策略。

调整 Source Map 格式#

为了提供良好的调试体验，Rsbuild 在开发环境下默认使用 cheap-module-source-map 格式 Source Map，这是一种高质量的 Source Map 格式，会带来一定的性能开销。

你可以通过调整开发环境的 Source Map 格式来提升构建速度。

比如禁用 Source Map：

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

或是把开发环境的 Source Map 格式设置为开销最小的 eval 格式：

export default {
  output: {
    sourceMap: {
      js: process.env.NODE_ENV === 'development' ? 'eval' : false,
    },
  },
};

关于不同 Source Map 格式之间的详细差异，请查看 webpack - devtool。

调整 Browserslist 范围#

这项优化的原理与「提升 Browserslist 范围」类似，区别在于，我们可以为开发环境和生产环境设置不同的 browserslist，从而减少开发环境下的编译开销。

比如，你可以在 package.json 中添加以下配置，表示在开发环境下只兼容最新的浏览器，在生产环境下兼容实际需要的浏览器：

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

注意，这项优化策略会导致开发环境与生产环境的构建产物存在一定差异。