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}};

核心改动点：

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

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

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

指标	Webpack 5	Rspack	提升幅度
冷启动 (Dev)	45.2 s	2.8 s	~16倍
热更新 (HMR)	2.5 s	0.1 s	~25倍
生产构建 (Build)	320 s (5分20秒)	18 s	~17倍
Artifact 体积	15.4 MB	15.2 MB	持平

开发体验的变化：

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

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

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

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