Modern.js 项目中使用 Rspack 构建工具指南

什么是 Rspack

Rspack 是一个基于 Rust 的高性能前端构建工具，由 Web 基础设施团队开发。它兼容 webpack 生态，同时利用 Rust 语言的性能优势，显著提升了构建速度。Modern.js 项目支持将 Rspack 作为替代 webpack 的构建工具选项。

启用 Rspack 构建模式

在 Modern.js 框架中启用

Modern.js 框架默认使用 webpack 作为构建工具。要切换到 Rspack，只需进行简单的配置调整：

1. 安装 Rspack 提供器依赖
2. 修改项目配置文件

import { createBuilder } from '@modern-js/builder';
import { builderRspackProvider } from '@modern-js/builder-rspack-provider';

const provider = builderRspackProvider({
  builderConfig: {
    // 项目配置
  },
});

在前端框架中集成

如果你在自定义前端框架中使用 Builder，集成 Rspack 与集成 webpack 类似：

{
  "devDependencies": {
-    "@modern-js/builder-webpack-provider": "2.8.0",
+    "@modern-js/builder-rspack-provider": "2.8.0"
  }
}

从 webpack 迁移到 Rspack

配置差异

Builder 努力消除不同构建工具间的差异，但仍有部分配置需要注意：

1. Source 配置：source.moduleScopes 暂不支持
2. Security 配置：security.sri 暂不支持
3. Tools 配置：
   • 使用 tools.rspack 替代 tools.webpack
   • 使用 tools.bundlerChain 替代 tools.webpackChain

Babel 配置迁移

Rspack 默认使用 SWC 进行代码转换，因此：

• 大部分 Babel 插件都有对应的 Rspack 替代方案
• 仍可通过 tools.babel 配置 Babel 插件，但会增加额外编译开销

Webpack 插件兼容性

目前只有部分 webpack 插件兼容 Rspack，常见替代方案：

• webpack.ProvidePlugin → builtins.provide
• webpack.DefinePlugin → builtins.define
• webpack-retry-chunk-load-plugin → output.assetsRetry

CSS Modules 配置

使用 output.cssModules 替代 tools.cssLoader 中的 CSS Modules 配置：

export default {
  output: {
    cssModules: {
      auto: resource => resource.includes('.module.'),
    },
  },
};

构建性能分析

Builder 支持通过环境变量生成构建性能分析报告：

RSPACK_PROFILE=ALL pnpm build

生成的报告包含：

• trace.json：Rust 侧详细耗时（使用 perfetto 查看）
• jscpuprofile.json：JavaScript 侧详细耗时（使用 speedscope 查看）
• logging.json：构建阶段粗粒度耗时记录

常见问题解答

启用 Rspack 后性能提升不明显？

可能原因及解决方案：

1. 使用了 Babel 相关配置：

   • 检查是否配置了 tools.babel
   • 使用 debug 模式查看最终 Rspack 配置

2. TypeScript 类型检查耗时：

   • 生产构建可禁用类型检查：output.disableTsChecker: true

3. 大量 Less 文件处理：

   • 目前 Less 处理性能仍有优化空间，可考虑迁移到 Sass

与 Rspack CLI 的差异

Builder 的 Rspack 模式相比原生 Rspack CLI 增加了多项开箱即用的功能：

功能	Builder 实现	原生 Rspack CLI
浏览器兼容性	根据构建目标自动设置 Browserslist	需手动配置
SourceMap	根据环境自动生成	默认禁用
SVG 转 React 组件	默认支持	需手动配置
组件库按需导入	自动支持 Ant Design 等	需手动配置
DevServer	基于 webpack-dev-middleware	使用 @rspack/dev-server

这些功能可通过相应配置选项按需调整。

总结

Modern.js 项目通过 Builder 提供了平滑的 Rspack 集成方案，使开发者能够轻松享受 Rust 构建工具的性能优势。迁移过程中需要注意配置差异和插件兼容性问题，但对于大多数项目来说，迁移成本可控，性能收益显著。