290 字
1 分钟
webpack5升级rspack
前置知识点
rspack
- 基于 Rust 编写的高性能 JavaScript 打包工具
- HMR超快、开发冷启动快、生产构建速度也快（没错build也快）
- 兼容大部分 webpack api，非常适用于webpack项目的迁移
swc-loader
- 内置swc-loader，基于Rust实现
- swc支持高版本ES和Typescript语法，无需额外的babel与ts解析器
准备
- Node.js >= 16
- 必须先升级至Webpack5
主要参考
TIP本项目安装的vue-loader版本是15.10.1，不依赖于webpack。部分版本无法脱离webpack。
TIP实际项目会区分不同的环境，可以通过
rspack build --env xx=xxx添加环境变量，并在配置里面获取。 具体参考：导出配置函数
迁移前后对比
运行机器：MBP2020/M1/16G
| 时间 | webpack5 | rspack | 提升 |
|---|---|---|---|
| 开发冷启动时间 | 22.66s 🐢 | 9.34s 🚗 | ↓58% |
| HMR时间 | 3.15s 🐢 | 0.37s 🚀 | ↓88% |
| 生产构建时间 | 55.43s 🐢 | 6.39s 🚀 | ↓88% |
总结
可以看到，rspack相比webpack，HMR和生产构建效率都有大幅提升。开发冷启动效率虽然没有vite那么惊艳，但是已经比webpack快很多了，并且是在可以接受的范围内了。
webpack5升级rspack
https://www.nick-h.cn/blog/posts/webpack5升级rspack/