皮克斯风超市搞笑动画
2026-06-30 3373427
2026-06-30 0
Rspack 2.1重磅发布，React Compiler构建性能提升高达13倍，为React开发者带来极速开发体验。核心内容：1. React Compiler Rust版本带来7-13倍的性能飞跃2. 新增TypeScript 7支持与多项构建优化特性3. 生态工具链（如Rsbuild、Rslib）的全面支持
by Rstack Team
我们很高兴地宣布 Rspack 2.1 已正式发布！
值得关注的变更如下：
React Compiler[1] 是 React 官方推出的构建时优化工具，它能在编译阶段自动为组件和 Hook 添加合适的记忆化逻辑，减少手动使用
过去，React Compiler 主要通过
在我们的基准测试中，React Compiler Rust 版本相比 Babel 版本性能提升约 7-13 倍：
| 命令 | React Compiler (Rust) | React Compiler (Babel) | 提升 |
|---|---|---|---|
rspack dev | 0.7 s | 10.6 s | 13.5x |
rspack build | 1.2 s | 9.3 s | 7.4x |
通过
// rspack.config.mjs
exportdefault {
module: {
rules: [
{
test: /.(?:js|jsx|ts|tsx)$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
transform: {
react: {
runtime: 'automatic',
},
reactCompiler: true,
},
},
},
},
},
],
},
};
更多配置方式参考 Rspack React Compiler 指南[3]。
构建性能始终是 Rspack 的核心关注点之一。在基准测试中，Rspack 2.1 相比 Rspack 2.0 的 生产构建性能提升约 16%，HMR 性能提升约 5%。
| 版本 | 生产构建（无缓存） | 生产构建（有缓存） | 热更新 |
|---|---|---|---|
| Rspack 1.7.11 | 3.12 s | 2.09 s | 129 ms |
| Rspack 2.0.0 | 2.66 s | 1.36 s | 113 ms |
| Rspack 2.1.0 | 2.22 s | 1.20 s | 107 ms |
数据来源：rspack-react-10k-benchmark[4]
这些提升主要来自三个方向：对构建主流程的大量微优化，优化模块图和依赖关系等底层数据结构，以及改进 SWC 解析与转换流程。
TypeScript 类型检查常常是构建链路中最耗时的环节之一。`ts-checker-rspack-plugin`[5] 现在支持使用 TypeScript 7（TypeScript Go）进行类型检查。在启用类型检查的构建中，整体耗时可减少约 60%。
在项目中安装 TypeScript 7 RC 版本后即可使用：
pnpm add typescript@rc -D
// rspack.config.mjs
import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';
export default {
plugins: [new TsCheckerRspackPlugin()],
};
Rspack 2.1 新增了 CircularCheckRspackPlugin[6]，用于替代废弃的 CircularDependencyRspackPlugin[7]。
// rspack.config.mjs
import { rspack } from '@rspack/core';
export default {
plugins: [new rspack.CircularCheckRspackPlugin()],
};
相比旧插件，新的 CircularCheckRspackPlugin 主要有两方面改进：
如果你正在使用
import.meta.globRspack 新增了对 import.meta.glob[9] 的支持。你可以按 glob 模式收集模块，并在需要时再加载它们：
const pages = import.meta.glob('./pages/**/*.js');
for (const path in pages) {
const mod = await pages[path]( "path");
}
这项功能已经在 Vite 和 Turbopack 中实现。Rspack 新增支持后，开发者可以在不同生态工具之间使用更一致、更熟悉的写法，减少切换工具时的认知成本。这也让同时支持多种构建工具的框架和库作者，可以复用更接近的实现。
查看 import.meta.glob 文档[10] 了解完整用法。
Rspack 2.1 进一步改进了 内置 CSS 支持[11]。新增的
CSS Modules 相关能力也继续补齐，支持更多 CSS Modules 语法与行为。
相关配置可参考 `module.generator`[12] 和 `module.parser`[13] 的 CSS 选项。
createRequireESM 模块中没有内置的
Rspack 2.1 新增了 `module.parser.javascript.createRequire`[15] 选项。开启后，Rspack 会识别从 Node.js
// rspack.config.mjs
export default {
module: {
parser: {
javascript: {
createRequire: true,
},
},
},
};
// index.js
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const value = require('./value.cjs');
这一选项还支持：
该选项默认关闭，查看 `module.parser.javascript.createRequire`[16] 了解更多。
Rspack 2.1 为 magic comments[17] 增加了
import(/* rspackChunkName: "dashboard" */ './dashboard');
原有的
查看 magic comments 文档[18] 了解更多。
Rspack 2.1 支持 TC39 Source Phase Imports[19] 提案中面向 WebAssembly 的用法。开启 `experiments.sourceImport`[20] 后，你可以通过静态的
与普通 WebAssembly 导入不同，source phase import 不会在导入时直接实例化 Wasm 模块，而是返回编译后的 `WebAssembly.Module`[21]。这使你可以自行控制实例化过程，例如使用不同的 imports 多次实例化同一个 Wasm 模块，或在多个 Web Worker 中复用同一个编译结果，避免重复编译成本。
// rspack.config.mjs
export default {
experiments: {
sourceImport: true,
},
};
// index.js
import source wasmModule from './module.wasm';
const instance = await WebAssembly.instantiate(wasmModule, {
// imports...
});
也可以使用动态导入：
const wasmModule = await import.source('./module.wasm');
const instance = await WebAssembly.instantiate(wasmModule);
此外，Rspack 新增了 `module.rules[].phase`[22]，用于按模块的导入阶段匹配规则。你可以区分普通导入的
Rspack 的持久化缓存按版本隔离。当
Rspack 2.1 为持久化缓存新增了自动清理机制，通过
// rspack.config.mjs
export default {
cache: {
type: 'persistent',
maxAge: 7 * 24 * 60 * 60,
maxVersions: 3,
},
};
当缓存版本超过保留数量，或长时间没有被访问时，Rspack 会优先清理较旧、较少访问的缓存版本。这样可以在保留近期可复用缓存的同时，避免持久化缓存目录无限增长。对于需要完全手动管理缓存的场景，也可以将
pureFunctions 稳定化Rspack 2.0 引入了实验性的 `pureFunctions`[25]，用于在跨模块场景下对无副作用函数调用进行更细粒度的 tree shaking。经过一段时间的迭代和验证，Rspack 2.1 将这项能力在生产模式下默认开启，无需再手动设置
这项能力主要覆盖两类场景：可以在函数定义处添加 `/*#__NO_SIDE_EFFECTS__*/`[26] 注解，也可以通过 `module.parser.javascript.pureFunctions`[27] 配置标记无副作用函数。当被标记函数的调用结果未被使用时，Rspack 会在 tree shaking 时安全移除这类调用。
例如，下面的
// utils.js
/*#__NO_SIDE_EFFECTS__*/
export function join(a, b) {
return `${a}-${b}`;
}
// index.js
import { join } from './utils';
// 返回值未被使用，该调用会被自动移除
join('btn', 'primary');
如果你希望关闭这项分析，可以禁用
// rspack.config.mjs
export default {
experiments: {
pureFunctions: false,
},
};
查看 tree shaking 指南[28] 了解更多。
Rspack 2.1 改进了内联常量场景下的依赖分析。当
// env.js
export const IS_DEV = false;
// index.js
import { IS_DEV } from './env';
if (IS_DEV) {
import('./debug-tools');
} else {
import('./app');
}
在上面的例子中，
这项优化也支持由
Rspack 会在编译阶段检测 ESM 导入是否访问了不存在的导出，并给出
Rspack 2.1 增强了对 ESM namespace 上
// index.js
import * as feature from './feature';
if ('debug' in feature) {
feature.debug();
}
在上面的例子中，如果
这项检测同样适用于由
export const 值绑定优化Rspack 2.1 精简了 ESM
__webpack_require__.d(__webpack_exports__, {
value: () => value,
});
但对于非循环模块中的
// 产物示意
// 优化前：访问 namespace.value 时会执行 getter 函数
__webpack_require__.d(__webpack_exports__, {
value: () => value,
});
// Rspack 2.1：非循环模块中的 const 导出会直接定义为只读值
// 这样访问 namespace.value 时不再需要执行 getter 函数
__webpack_require__.d(
__webpack_exports__,
{},
{
value: value,
},
);
// constants.js
export const answer = 42;
const message = 'hello';
export { message };
export default 'default value';
上面的具名
我们正与 TanStack 团队合作完善 TanStack Start 的 Rsbuild 支持，并已取得阶段性成果：TanStack Start 已正式支持 Rsbuild[29]。开发者现在可以使用 Rsbuild 构建 TanStack Start 应用，获得包括 RSC 在内的框架能力。
我们在 RSC 方向上的核心目标，是提供通用的 RSC 构建能力，让上层框架能够基于自己的路由、渲染和服务端运行时方案接入 RSC，复用统一的构建基础设施。
如果你想在 Rspack 技术栈中尝试 RSC，可以参考：
Rsbuild 2.1 已经与 Rspack 2.1 同步发布，查看 Rsbuild 2.1 博客（https://rsbuild.rs/zh/blog/v2-1） 了解更多。
Rslib 新增了基于
// rslib.config.ts
import { defineConfig } from '@rslib/core';
export default defineConfig({
lib: [
{
dts: {
isolated: true,
},
},
],
});
这项能力适合 Monorepo 或多包库的日常构建场景。你可以将类型声明文件生成和类型检查拆分为两步：
以 Rsbuild 仓库为例，不同方案生成类型声明文件的耗时如下：
| 方案 | 耗时 |
|---|---|
| TypeScript 6 | 9.7s |
| TypeScript 7 | 4.1s |
| Isolated Declarations | 2.3s |
更多详情参考 dts.isolated[35]。
Rstest 0.10 聚焦测试效率与稳定性，新增
rstest run --changed
你也可以指定某个 commit 或分支作为对比范围：
rstest run --changed=HEAD~1
rstest run --changed=origin/main
rstest run --related src/button.ts
rstest run --findRelatedTests src/button.ts
如果只想预览受影响的测试文件，可以搭配
rstest list --changed --filesOnly
rstest list --related src/button.ts --filesOnly
同时，Rstest 0.10 还包含以下改进：
更多信息请参考 Rstest 0.10 博客（https://rstest.rs/zh/blog/announcing-0-10）。
内置大量规则：Rslint 已移植 ESLint core 以及
兼容 ESLint 插件：在内置规则之外，Rslint 现在还可以直接运行社区 ESLint 插件的规则，与内置原生规则一同工作。只需在配置中以自定义前缀挂载插件，插件产生的诊断会合并进同一份报告，autofix 也能通过
// rslint.config.mjs
import examplePlugin from 'eslint-plugin-example';
export default [
{
files: ['**/*.ts'],
plugins: { example: examplePlugin },
rules: {
'example/some-rule': 'error',
},
},
];
更多用法和当前限制参考 ESLint 插件兼容指南[38]。
Rspress 现在提供了更多 Agent Skills，例如：
下面是一个使用
这些 skill 既可以直接安装到现有项目中，也可以在项目初始化时直接选择。更多信息参考 Rspress - AI 指南[39]。
Rsdoctor 在 Github Action 中新增了 AI 分析能力[40]，可以在构建分析报告存在体积变化时，结合当前项目的构建数据分析劣化问题，辅助定位性能瓶颈、产物体积增长和优化方向。
我们发布了 rspack-merge[41]，这是一个用于 Rspack 配置合并的 npm 包，可以覆盖从基础配置拼接到 loader、plugin 规则级合并的需求。
// rspack.config.ts
import { defineConfig } from'@rspack/cli';
import { merge } from'rspack-merge';
const sharedConfig = defineConfig({
// ...
});
const serverConfig = merge(sharedConfig, {
// ...
});
const clientConfig = merge(sharedConfig, {
// ...
});
exportdefault [serverConfig, clientConfig];
React Compiler: https://react.dev/learn/react-compiler/introduction
[2]React Compiler 被移植到 Rust: https://github.com/facebook/react/pull/36173
[3]Rspack React Compiler 指南: http://rspack.rs/zh/guide/tech/react#react-compiler
[4]rspack-react-10k-benchmark: https://github.com/LingyuCoder/rspack-react-10k-benchmark/actions/runs/28093280576
[5]内置 CSS 支持: http://rspack.rs/zh/guide/tech/css#内置-css-支持
[12]magic comments: http://rspack.rs/zh/api/runtime-api/module-methods#magic-comments
[18]magic comments 文档: http://rspack.rs/zh/api/runtime-api/module-methods#magic-comments
[19]Source Phase Imports: https://github.com/tc39/proposal-source-phase-imports
[20]tree shaking 指南: http://rspack.rs/zh/guide/optimization/tree-shaking#purefunctions
[29]TanStack Start 已正式支持 Rsbuild: https://tanstack.com/blog/start-adds-rsbuild-support
[30]TanStack Start 指南: https://rsbuild.rs/zh/guide/framework/react#tanstack-start
[31]rsbuild-plugin-rsc: https://github.com/rstackjs/rsbuild-plugin-rsc
[32]Rsbuild 2.1 博客: https://rsbuild.rs/zh/blog/v2-1
[33]dts.isolated: https://rslib.rs/zh/config/lib/dts#dtsisolated
[34]rslint --type-check: https://rslint.rs/guide/type-checking
[35]dts.isolated: https://rslib.rs/zh/config/lib/dts#dtsisolated
[36]Rstest 0.10 博客: https://rstest.rs/zh/blog/announcing-0-10
[37]内置规则: https://rslint.rs/rules/
[38]ESLint 插件兼容指南: https://rslint.rs/guide/eslint-plugins
[39]Rspress - AI 指南: https://rspress.rs/zh/guide/start/ai
[40]AI 分析能力: https://rsdoctor.rs/zh/guide/start/action#ai-%E8%BE%85%E5%8A%A9%E5%88%86%E6%9E%90
[41]rspack-merge: https://github.com/rstackjs/rspack-merge
登录查看剩余 70% 内容