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

前言

在现代前端开发中，构建工具的选择对项目开发效率和最终性能有着重要影响。Modern.js 项目提供了灵活的构建工具支持，除了默认的 Webpack 外，还支持使用 Rspack 这一新兴的高性能构建工具。本文将详细介绍如何在 Modern.js 项目中启用和配置 Rspack，以及从 Webpack 迁移到 Rspack 的完整指南。

Rspack 简介

Rspack 是一个基于 Rust 实现的高性能前端构建工具，与 Webpack 相比具有显著的构建速度优势。它兼容大部分 Webpack 配置和生态，同时提供了更快的构建速度和更低的资源占用。

启用 Rspack

在 Modern.js 框架中启用

Modern.js 框架默认使用 Webpack 作为打包工具。要启用 Rspack，只需在项目配置中进行简单调整：

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

在前端框架中接入

如果你基于 Builder 开发了前端框架，接入 Rspack 也非常简单：

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

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

同时需要在 package.json 中替换依赖项：

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

从 Webpack 迁移到 Rspack

1. 配置差异

Builder 已经适配了大部分 Rspack 配置，但仍有一些差异需要注意：

• Source Config：source.moduleScopes 暂不支持
• Security Config：security.sri 暂不支持
• Performance Config：performance.buildCache 暂不支持
• Tools Config：tools.terser、tools.tsLoader 等需要替换为 Rspack 对应配置

2. 配置迁移指南

WebpackChain 迁移

将 tools.webpackChain 替换为 tools.bundlerChain：

export default {
  tools: {
    bundlerChain: (chain, { env }) => {
      if (env === 'development') {
        chain.devtool('cheap-module-eval-source-map');
      }
    },
  },
};

Webpack 配置迁移

将 tools.webpack 替换为 tools.rspack：

export default {
  tools: {
    rspack: (config, { env }) => {
      if (env === 'development') {
        config.devtool = 'cheap-module-eval-source-map';
      }
      return config;
    },
  },
};

3. Babel 配置迁移

Rspack 默认使用 SWC 进行转译，Babel 相关配置需要调整：

Babel 插件	Rspack 替代方案
@babel/preset-env	builtins.presetEnv
@babel/preset-react	builtins.react
babel-plugin-import	builtins.pluginImport

4. Webpack 插件迁移

部分 Webpack 插件在 Rspack 中需要替换：

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

性能优化建议

性能分析

使用环境变量进行构建性能分析：

RSPACK_PROFILE=ALL pnpm build

分析结果包含三种文件：

1. trace.json - Rust 侧性能数据
2. jscpuprofile.json - JavaScript 侧性能数据
3. logging.json - 构建日志信息

常见性能问题

1. Babel 相关配置：避免不必要的 Babel 插件
2. TypeScript 类型检查：生产构建可关闭
3. 大量 Less 文件：考虑使用 CSS 替代
4. 大量 SVG 文件：不需要 SVG 组件时可关闭
5. 组件库引入方式：确保按需引入

Rspack 与 Rspack CLI 的区别

Builder 集成的 Rspack 相比原生 Rspack CLI 提供了更多开箱即用的功能：

1. 智能的浏览器兼容性处理
2. 环境感知的 SourceMap 生成
3. SVG 转 React 组件支持
4. 常用组件库按需引入
5. 默认 TypeScript 类型检查
6. 内置 PostCSS 处理
7. 增强的 HTML 处理能力

总结

Modern.js 项目通过 Builder 提供了对 Rspack 的深度集成，使开发者能够轻松享受到 Rspack 带来的性能优势。迁移过程相对平滑，但仍需注意配置差异和性能优化点。通过合理配置，可以显著提升大型项目的构建效率。