把 webpack 项目迁到 Rspack 2.0：依赖从 192 砍到 1，万组件构建缓存命中仅需 1.4s

背景webpack 的老问题与 Rspack 的新答案如果你的前端项目还在用 webpack 5你大概率经历过这些痛点生产构建慢中大型项目动辄十几秒甚至几十秒CI 流水线里构建步骤成了瓶颈。依赖臃肿node_modules里塞满了间接依赖webpack-dev-server一装就拉来上百个包。HMR 不够快改一行代码等一两秒才刷新在万组件级项目里体验尤其明显。字节跳动开源的Rspack从 1.0 开始就以「Rust 写的 webpack 替代品」定位进入开发者视野。2026 年 7 月 29 日Rspack 团队正式发布了2.0 版本——这不再只是「更快一点的 webpack」而是一次有意识的架构升级默认行为向现代 JavaScript 开发对齐、核心包全面转为纯 ESM、默认依赖数量断崖式下降。图0文章封面概念示意图官方在包含1 万个 React 组件的基准项目rspack-react-10k-benchmark上给出了如下数据版本生产构建无缓存生产构建持久化缓存命中HMR 热更新Rspack 1.05.6 s5.6 s128 msRspack 1.73.6 s2.2 s134 msRspack 2.03.1 s1.4 s118 ms数据来源Rspack 2.0 官方发布博客。2.0 相比 1.7 整体性能提升约10%相比 1.0 最多可提升100%。图1Rspack 官方 rspack-react-10k-benchmark 基准1 万组件 React 项目。数据为官方发布基准非本文实测。除了构建速度2.0 另一个亮眼的改进是依赖精简包1.x 依赖数2.0 依赖数安装体积变化rspack/dev-server192115 MB →1.4 MB90%rspack/core81——rspack/cli多个0——图2Rspack 2.0 默认依赖大幅精简官方发布数据。rspack/cli在 2.0 变为零依赖且不再默认引入 dev-server。本文将以一个真实的 webpack 5 项目为例手把手走完迁移到 Rspack 2.0 的全流程并标注每一步需要注意的坑点。环境准备Node.js 版本要求Rspack 2.0 要求 Node.js ≥ 20.19 或 ≥ 22.12不再支持 Node.js 18。这是相比 1.x 的重要变化迁移前务必先确认node -v # 期望输出 v20.19.0 或 v22.12.0如果版本不满足请先升级 Node.js。推荐使用 nvmmacOS/Linux或 nvm-windowsWindows管理多版本。来源 Rspack 快速开始 —— 版本要求、 从 v1 升级到 v2安装 Rspack 2.0在项目目录下执行# 移除旧依赖 npm remove webpack webpack-cli webpack-dev-server 安装 Rspack 2.0纯 ESM 包 npm add rspack/core^2.0.0 rspack/cli^2.0.0 -D 如果需要开发服务器rspack dev / rspack serve npm add rspack/dev-server^2.0.0 -D注意rspack/cli和rspack/dev-server在 2.0 中都是可选依赖。如果你只用rspack build做生产打包不需要安装 dev-server。第一步替换 package.json 脚本将构建脚本从 webpack 切换到 Rspack CLI{ scripts: { dev: rspack dev, build: rspack build, preview: rspack preview } }Rspack CLI 支持与 webpack 类似的-c / --config参数指定配置文件。如果不指定默认读取rspack.config.js或.mjs。第二步重命名并改造配置文件将webpack.config.js重命名为rspack.config.mjs推荐使用.mjs以匹配 2.0 的纯 ESM 生态然后做以下关键改动2.1 缓存配置迁移webpack 的cache.type: filesystem在 Rspack 中对应cache.type: persistent// rspack.config.mjs import { rspack } from rspack/core; export default { // Rspack 持久化缓存 cache: { type: persistent, buildDependencies: [ import.meta.url, ./package.json, ], }, };开启持久化缓存后二次构建命中缓存的速度会显著提升。官方数据显示 SWC 压缩插件的结果也可被缓存复用缓存命中时构建性能再提升约50%内存占用下降20%。2.2 用 builtin:swc-loader 替代 babel-loaderRspack 内置了基于 SWC 的转译器原生支持 TypeScript、JSX 和最新 ECMAScript 语法。如果你的babel-loader仅用于这些用途可以直接移除// rspack.config.mjs export default { module: { rules: [ { test: /\.(?:js|mjs|jsx|ts|tsx)$/, loader: builtin:swc-loader, options: { detectSyntax: auto, jsc: { parser: { syntax: typescript, tsx: true, }, transform: { react: { runtime: automatic, }, }, }, }, }, ], }, };如果你的 babel 配置包含自定义插件/预设如 styled-components、i18n 等则需要保留 babel-loader。但建议评估是否有 Rspack/SWC 原生替代方案因为 babel-loader 在大项目中会显著拖慢构建速度。2.3 插件替换映射大部分 webpack 内置插件和社区插件可直接使用但部分需要换成 Rspack 自带版本webpack 插件 / loaderRspack 2.0 替代webpack.HotModuleReplacementPluginrspack.HotModuleReplacementPlugincopy-webpack-pluginrspack.CopyRspackPluginmini-css-extract-pluginrspack.CssExtractRspackPluginCssExtractRspackPlugin.loadercss-loader保留不变兼容示例——CSS 提取// rspack.config.mjs import { rspack } from rspack/core; export default { plugins: [ new rspack.CssExtractRspackPlugin(), ], module: { rules: [ { test: /.css$/i, use: [rspack.CssExtractRspackPlugin.loader, css-loader], type: javascript/auto, }, ], }, };第三步处理破坏性变更从 1.x 升级到 2.0 有若干不兼容变更需要逐一处理exportsPresence 默认值变更module.parser.javascript.exportsPresence默认值从warn变为error。当代码引用了不存在的导出时现在会直接报错而非仅警告// 如需恢复旧行为不推荐长期使用 export default { module: { parser: { javascript: { exportsPresence: auto, }, }, }, };devServer 部分选项变更devServer.proxy、devServer.watchFiles等选项发生了变化。具体差异请查阅 升级指南 的「开发服务器」章节。--analyze 已移除rspack/cli内置的webpack-bundler-analyzer已被移除--analyze参数不可用。推荐使用RsdoctorRspack 团队出的构建分析工具替代npm add rsdoctor/rspack-plugin -D然后在配置中引入即可。Pure ESM 包rspack/core、rspack/cli、rspack/dev-server在 2.0 中以纯 ESM形式发布移除了 CommonJS 构建产物。Node.js 20 运行时已原生支持require(esm)加载 ESM 模块所以通过 JavaScript API 使用 Rspack 的项目通常无需修改代码。但建议新配置文件统一使用import/export default语法。第四步完整迁移流程示意以下是从头到尾的迁移步骤总览图3webpack 5 → Rspack 2.0 迁移流程概念示意。实际操作中各步骤可能因项目复杂度有所调整。第五步测量验证完成配置迁移后用以下方式测量构建耗时# 无缓存完整构建 time rspack build 清除缓存后再测一次确保冷启动 rm -rf node_modules/.cache/rspack time rspack build 再次构建命中持久化缓存 time rspack build以上命令输出的是你本地项目的实际数据会因项目规模、硬件配置和插件组合而异。本文引用的 1.4s / 3.1s 等数字是 Rspack 官方在 1 万组件 React 基准项目上的测试结果不代表你的项目一定能达到相同数值。如果遇到构建错误优先检查以下几点Node.js 版本是否 ≥ 20.19。是否遗漏了rspack/dev-server的单独安装使用rspack dev时必需。插件名是否已替换为rspack.*前缀版本。cache.type是否为persistent而非filesystem。避坑清单汇总迁移过程中最容易踩的坑#坑点解决方案1Node 版本不够升级后忘记查 Node 版本直接npm install报错先执行node -v确保 ≥ 20.19 / 22.122dev-server 找不到rspack dev报Cannot find module rspack/dev-server2.0 中 cli 不再默认依赖 dev-server需手动npm add rspack/dev-server -D3cache 字段照搬复制 webpack 的filesystem配置导致缓存不生效改为cache: { type: persistent }4babel-loader 拖慢速度迁移后保留了不必要的 babel-loaderTS/JSX/ESNext 交给builtin:swc-loader仅在确实需要 Babel 插件时保留5exportsPresence 报错之前只是 warn 的导出引用问题变成 error显式设为auto或修复源码中的无效导入6--analyze 失效习惯性加--analyze参数发现报错改用 Rsdoctorrsdoctor/rspack-plugin7.swcrc 不再读取builtin:swc-loader在 2.0 中不再自动读.swcrc文件将 SWC 配置写入 loader 的options字段8CommonJS 配置文件失效旧的module.exports {...}在某些场景下与纯 ESM 包冲突配置文件改用.mjsexport default {}总结与延伸Rspack 2.0 的核心价值可以概括为三件事构建更快在官方万组件基准上缓存命中后的生产构建降至1.4sHMR118ms。依赖更轻dev-server 从 192 个依赖砍到1 个安装体积缩减90%。生态更现代纯 ESM、更合理的默认值、渐进式的 breaking change 管理。对于从 webpack 5 迁移的存量项目上述流程可以在一两个工时内完成主体工作。对于全新项目Rspack 团队更推荐使用上层的Rsbuild零配置构建工具基于 Rspack开箱即用# 新项目推荐用 Rsbuild内置 Rspack 2.0 npm create rsbuildlatest适用场景参考✅ 适合迁移React/Vue/Angular 的 webpack 5 项目、需要精细控制构建配置的中大型项目、CI 构建时间敏感的项目。⚠️ 暂不适合重度依赖 V8 原生 addon.node文件的项目、Node.js 20.19 的老旧环境、需要--analyze内置功能但未接入 Rsdoctor 的团队。延伸阅读Rspack 2.0 官方发布博客中文从 webpack 迁移到 Rspack 官方指南从 Rspack 1.x 升级到 2.0破坏性变更清单Rspack GitHub 仓库MIT 协议ByteDance Web Infra 团队维护Rsdoctor 构建分析工具Rsbuild 零配置构建工具