close
  • 简体中文

      • 提升构建性能

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

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

      性能分析

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

      请参考 构建性能分析 章节了解更多。

      通用优化

      以下是一些通用的优化方法，对开发模式和生产模式均有提速效果。

      升级 Rsbuild

      升级 Rsbuild 到最新版本，可以获得最新的性能优化，参考 升级 Rsbuild 章节。

      开启持久化缓存

      Rsbuild 提供了 performance.buildCache 配置，开启后可以显著提升重构建的速度。

      React Compiler

      如果项目中使用了 React Compiler，建议通过 Rsbuild 内置的 Rust 版本的 React Compiler 来启用，而不是通过 Babel 接入 React Compiler，从而减少 Babel 带来的性能开销。

      减少模块数量

      对应用引用的模块数量进行优化，可以减少产物体积并提升构建性能，请阅读 优化产物体积 章节来了解一些优化方法。

      并行处理

      部分插件支持使用 worker 线程并行处理模块。开启后，模块会被分配到多个 worker 线程中处理，降低主线程压力，并在编译大量模块时提升整体构建性能。

      以下插件支持 parallel 选项：

      工具选择

      尽管 Rsbuild 本身已经提供了优秀的构建性能，但当你使用某些基于 JavaScript 的工具时，可能会对整体构建性能产生负面影响，特别是在大型项目中。

      优化 Tailwind CSS

      在使用 Tailwind CSS v3 时，如果没有正确地配置 tailwind.config.js 中的 content 字段，可能会导致构建性能和热更新性能下降。

      参考 Tailwind CSS v3 - 优化构建性能 了解更多。

      开发模式优化

      以下是针对开发构建进行提速的方法。

      开启 Lazy compilation

      启用 lazy compilation 可以显著减少开发启动时编译的模块数量，从而提升启动时间。

      rsbuild.config.ts
      export default {
  dev: {
    lazyCompilation: true,
  },
};

      请参考 dev.lazyCompilation 了解更多。

      开启 native watcher

      启用 Rspack 的 native watcher 可以提升开发模式下的 HMR 性能。

      rsbuild.config.ts
      export default {
  tools: {
    rspack: {
      experiments: {
        nativeWatcher: true,
      },
    },
  },
};

      Source map 格式

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

      你可以通过 output.sourceMap 调整开发时的 source map 格式，从而提升构建速度。

      比如禁用 source map：

      rsbuild.config.ts
      export default {
  output: {
    sourceMap: {
      js: false,
    },
  },
};

      或是把开发模式的 source map 格式设置为开销最小的 eval 格式：

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

      关于不同 source map 格式之间的详细差异，请查看 Rspack - devtool。

      Browserslist 范围

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

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

      .browserslistrc
      [production]
chrome >= 107
edge >= 107
firefox >= 104
safari >= 16

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

      注意，这项优化方法会导致开发模式与生产模式的构建产物存在一定差异。