当前位置：首页 > news >正文

Rspack

news 2025/8/30 10:27:52

背景

目前麦座项目启动构建比较缓慢，每次进行启动项目或者部署上线的时候都需要耗费比较长的时间，所以现在急需一个新的打包工具来加快启动打包。但是麦座项目用的技术栈、打包工具都不相同，有没有一种能够兼容大部分技术栈并且能够几乎无痛迁移的快速打包工具呢？那就是下面所说的Rspack。

介绍

Rspack 是由字节跳动 Web Infra 团队基于 Rust开发的高性能 JavaScript 打包工具，旨在解决大型项目构建性能瓶颈（如构建时间长达十几分钟甚至半小时），提供与 Webpack 生态系统的良好兼容性，可无缝替换 Webpack，带来闪电般的构建速度（相比 Webpack 提升 5-10 倍）。其特点包括极快的启动速度、内置增量编译和 HMR 优化，以及对 TypeScript、CSS等开箱即用的支持

对比

维度	Webpack	Rspack
核心实现语言	JavaScript	Rust（并行、内存安全）
配置兼容性	原生	内置 Webpack 配置/Loader/插件适配层
开发启动（Dev Server）	5–13 s（因项目规模）	0.5–3 s
HMR 更新速度	400–800 ms	80–300 ms
生产构建时间	60–180 s	10–75 s
增量构建	45 s（二次）	15 s（二次）
产物体积（gzip）	237–1 464 kB	233–1 382 kB
内存占用（开发模式）	≈ 300 MB	≈ 700 MB
插件生态	丰富、稳定	基本覆盖常用插件，少量不兼容
缓存能力	磁盘缓存成熟	仅内存级缓存；持久化 & 云端缓存规划中

构建速度

从上图可以看到，Rspack构建启动速度相比于webpack甚至可以提升90%以上，这已经是一个非常恐怖的数字了

Github测试地址：https://github.com/rspack-contrib/build-tools-performance?tab=readme-ov-file

我自己也去测试了一下，确实性能非常好

rspack打包需要2s，但是webpack打包需要10s，这还是小型项目的情况下，如果是公司的巨石项目，提升就更明显了。

兼容性&稳定性

但是公司一般看的肯定是兼容性和稳定性：是否兼容现有框架技术栈甚至插件？是否稳定更新版本，社区是否活跃？

兼容性：Rspack已经覆盖了90%+的webpack社区插件，只有少量并未完全对齐，未兼容插件可以提issue或者写兼容层，工作量也是非常小的（往常情况issue也在一周之内解决了）

稳定性&社区活跃度：2025-7.15已经发布1.4.8版本，并且社区一直持续活跃，github的star量达11.8k

成本及收益

webpack5几乎可以无痛迁移Rspack，团队用的最多的umi也可以通过Rspack配套的Kmi进行迁移，部分场景甚至只需改几行配置即可。但是节省的构建打包时间确实非常可观的，就拿boss-react举例，启动大概耗时30s，打包大概60s，如果用Rspack，在启动打包上就能节省一分钟，这还不算部署、热更新上节省的时间，Rspack对于整个团队的写代码的体验与速率都是非常好的。

方案

部分项目可以根据官网进行迁移

webpack迁移官网：Migrate from webpack - Rspack

kmi官网：KMI

也可以现在开发环境进行试点，确认无误后再进行全部迁移

项目	技术栈	工具	package行数
boss	vue	webpack4	173
boss-react	react	umi2	209
mz-applet-site	react，taro	webpack5	112
mz-applet-taro	react	taro	105
mz-boss-portal	react	umi3	180
web_msite	vue	webpack2	112
web_pc	vue	webpack2	158

但是Rspack目前只能从webpack5或者umi4进行迁移，这里可能就需要先把这些打包工具全部进行升级然后再进行迁移，考虑到团队后续可能会切换微前端方案，其实认为可以在切换微前端方案的时候一起吧打包工具给升级并且迁移。

Boss迁移试点

安装rspack

npm add @rspack/core @rspack/cli -D

移除webpack

npm remove webpack webpack-cli webpack-dev-server

更新package.json

{"scripts": {
-   "serve": "webpack serve",
-   "build": "webpack build",
+   "serve": "rspack serve",
+   "build": "rspack build",}
}

文件重命名webpack.config.js为rspack.config.js

替换内置插件，例如替换 DefinePlugin：

- const webpack = require('webpack');
+ const { rspack } = require('@rspack/core');module.exports = {//...plugins: [
-   new webpack.DefinePlugin({
+   new rspack.DefinePlugin({// ...}),],
}

替换社区插件

使用 rspack.CopyRspackPlugin 代替 copy-webpack-plugin
使用 rspack.CssExtractRspackPlugin 代替 mini-css-extract-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');换成const HtmlWebpackPlugin = require('@rspack/plugin-html');
copyplugin

修改cache

把原本对象写法换成cache：true即可

报错:

手动再安装一次webpack5

升级less-loader和swc-loader

启动：