Webpack 慢到离谱？迁移到 Rspack (Rust) 实战：构建速度从 5 分钟缩短到 10 秒

标签：#Rspack #Webpack #Rust #前端工程化 #性能优化 #ByteDance

🐢 前言：JavaScript 的算力极限

Webpack 之所以慢，核心原因在于它是由JavaScript编写的。
JS 是单线程的，且 JIT（即时编译）机制在处理大规模 AST（抽象语法树）转换时，CPU 效率远不如原生代码。

Rspack (Rust Pack)由字节跳动开源，它的核心逻辑全部用 Rust 重写。

• 高度并行：充分利用多核 CPU。
• 原生编译：没有 GC 开销，AST 解析速度极快。
• 兼容性：直接兼容 Webpack 的 Loader 和 Plugin 架构。

构建原理对比 (Mermaid):

🛠️ 一、 迁移第一步：脚手架与依赖

假设你有一个标准的 React + TS + Webpack 项目。
首先，安装 Rspack 的核心依赖。

# 移除 webpack 相关依赖 (可选，建议先共存测试)# npm uninstall webpack webpack-cli ...# 安装 rspacknpminstall-D @rspack/cli @rspack/core

Rspack 提供了开箱即用的 React/Vue 支持，你甚至不需要配置 Babel。因为它内置了SWC(Rust 编写的高性能编译器) 来处理 TS 和 JSX。

⚙️ 二、 配置文件迁移：从 webpack.config 到 rspack.config

Rspack 的配置设计得与 Webpack 极其相似。90% 的配置可以直接复制粘贴。

webpack.config.js (旧):

constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.tsx',module:{rules:[{test:/\.tsx?$/,use:'babel-loader',// 🐢 慢的根源exclude:/node_modules/,},{test:/\.css$/,use:['style-loader','css-loader'],}],},plugins:[newHtmlWebpackPlugin({template:'./index.html'})]};

rspack.config.js (新):

constpath=require('path');const{HtmlRspackPlugin}=require('@rspack/core');// ✅ 使用内置的高性能 Pluginmodule.exports={entry:'./src/index.tsx',// Rspack 内置了对 TS/JSX 的支持，默认情况下甚至不需要配置 rules！// 除非你有特殊的 Babel 插件，否则直接删掉 babel-loader 配置。module:{rules:[{test:/\.css$/,type:'css',// ✅ Rspack 原生支持 CSS，不需要 style-loader}],},plugins:[newHtmlRspackPlugin({template:'./index.html'})],// 开启内置的增量编译缓存experiments:{css:true}};

核心改动点：

1. **删除babel-loader**：利用 Rspack 内置的 SWC 编译 TS/JSX，速度提升 10 倍。
2. 替换 Plugin：使用@rspack/core导出的HtmlRspackPlugin等替代 Webpack 社区插件。
3. 原生 CSS 支持：直接设置type: 'css'，无需配置复杂的 loader 链。

🚀 三、 性能实测：感受速度的差异

我们将一个包含 500+ 组件的中型 React 项目进行迁移对比。

开发体验的变化：

• Webpack: 启动项目 -> 刷朋友圈 -> 回来还没好。
• Rspack: 启动项目 -> 眨眼 -> 好了。

⚠️ 四、 避坑指南 (Migration Pitfalls)

虽然 Rspack 兼容性很高，但以下场景需要注意：

1. 特定的 Webpack Loader：
   大部分 Loader (如less-loader,postcss-loader) 都能直接工作。但如果 Loader 内部深度依赖 Webpack 的非公开 API，可能会失败。
2. 复杂的 Babel 插件：
   既然去掉了babel-loader，原本配置在.babelrc里的插件（如babel-plugin-import）就失效了。
   解决：Rspack 提供了rspack.config.js中的builtins配置来替代常见 Babel 插件功能，或者使用 SWC 插件。
3. Module Federation：
   Rspack 对模块联邦（微前端）的支持非常好，但配置字段可能略有差异，建议查阅官方文档。

🎯 总结

Rspack 不是 Webpack 的简单替代品，它是前端构建工具链的一次工业革命。
它证明了：将计算密集型任务交给 Rust，将业务逻辑留给 JS，是未来前端基建的唯一出路。

如果你的项目构建时间超过 2 分钟，别犹豫了，哪怕花 1 天时间迁移，节省下来的时间一个月就能回本。

Next Step:
如果你的项目还在用create-react-app(CRA)，Rspack 官方提供了一个迁移工具。
尝试运行：npm create rspack@latest初始化一个新项目，把你的旧代码src目录拷贝过去，看看能不能直接跑起来？