Rspack：还能比Vite更快？

前端端Blues
6,257 阅读6分钟

引言

image.png

在当今的前端开发领域，高效的构建工具对于项目的成功至关重要。Web 构建工具不断演进，以满足开发者对于性能、易用性和生态兼容性的需求。在这个充满活力的领域中，Webpack 和 Vite 作为传统强者，各自拥有独特的特点。

而如今，Rspack 作为一股新势力强势登场，为 Web 构建带来了新的机遇和挑战。(ps：扶我起来，我还能卷！)

Webpack 与 Vite：传统强者的特点

知己知彼，百战不殆！在介绍Rspack之前，我们先回顾一下当前前端打包界两大巨头的基本情况。

image.png

Webpack的优点和缺点

image.png

优点：能高效地管理模块依赖，将多个模块打包成更少的文件，从而减少浏览器的请求次数，提高页面加载速度。它还支持代码分割，能够按需加载模块，提升应用的性能。同时，Webpack 拥有丰富的插件生态系统，可以满足各种复杂的构建需求。

缺点：配置相对复杂，对于初学者来说可能有一定的学习成本。而且在处理大型项目时，构建速度可能会较慢，其实是特别慢！

针对Webpack的话，只能说爱过！

Vite的优点和缺点

image.png

优点：开发服务器能够快速启动，几乎是瞬间响应，大大提高了开发效率。开发者可以立即看到代码更改的效果，实现了极速的热模块替换（HMR），使得开发体验更加流畅。Vite 的配置相对简单直观，提供了默认的配置选项，能够满足大多数常见的开发需求。

缺点：Vite 在开发过程中能够快速启动服务器，但对于庞大的项目，首次加载页面时可能需要加载大量的模块。这可能会导致首次加载时间较长，特别是在网络条件不佳的情况下。开发环境、生产环境构建机制不一致，出现频率不高但一旦出现就会很让人头疼，因为很难排查原因。

Rspack 的登场：新势力的崛起

什么是Rspack

image.png

Rspack 是一个基于 Rust 编写的高性能 JavaScript 打包工具， 它提供对 Webpack 生态良好的兼容性，能够无缝替换 Webpack， 并提供闪电般的构建速度。基于 Rust 和 TypeScript 的高度并行、增量编译架构，构建性能极佳，带来极致的开发体验。

Rspack 的核心特性

  • 高性能
    • 基于 Rust 语言开发
    • 优化的构建算法
    • 高效的资源处理
  • 强大的功能
    • 支持多种前端框架
    • 热模块替换（HMR）
    • 代码分割
    • 插件系统
  • 易用性
    • 简洁的配置
    • 良好的文档和社区支持
    • 与现有工具集成

关于Rust

image.png

Rust 集表达力、高性能、内存安全于一身，在 1.0 版本发布后不久，口碑就一路高飞猛进，从 16 年起，已经连续 8 年成为 Stack Overflow 用户评选出来的最受喜爱的语言。

Rust正在引领前端基建新潮流～

  • Zed：基于Rust开发的代码编辑器，Atom 团队新作。
  • SWC：基于 Rust 的前端构建工具，可以理解为 Rust 版本的 Babel，但是性能有 10 倍提升。目前被 Next.js、Deno , Rspack、Vite等使用。
  • Turbopack：基于 Rust 的 Webpack 继任者，Vercel出品，技术靠谱，但太封闭（只有Vercel家的Next.js在用）。

除此之外还有Rome、Deno、Tauri等等。（ps：目前市面上很多前端岗位都以Rust语言为加分项）

一则分享：前端视角对Rust的浅析

Rspack 实际项目展示

我们clone一下github上面的moderate-react-admin，该项目支持我们以Rspack或Vite两种方式启动，方便我们直接对比两种方式在同一代码体量下的表现。

// 先进入到后台项目dev-server，启动服务
pnpm i
pnpm dev

// 再进入到前端项目admin-antd，启动服务
pnpm i

//用Vite启动
pnpm vdev

// 用Rspack启动
pnpm dev

开发环境：Vite vs Rspack

资源请求数完成用时（ms）截图
Vite3081410image.png
Rspack32575image.png

对比下来确实是Rspack要更快一些，但是对于我们开发者来说这个差距并不是特别明显。

但是这仅针对我们这个小项目，随着项目源文件的增加，Vite的Page reload时间增长曲线会越来越陡峭！反观Rspack则能更好地将Page reload时间控制在一个可接受的阀值内。

image.png

以上数据来源于「Moonvy月球背面」 ，原文地址：moonvy.com/blog/post/2…

生产环境：Vite vs Rspack

//用Vite打包
pnpm vbuild

// 用Rspack打包
pnpm build
打包耗时（s）产物体积（mb）截图
Vite8.562.4image.png
Rspack1.642.3image.png

很明显Rspack在生产打包速度这一块基本上碾压了Vite，这确实给我带来了不小的震撼，要知道这只是一个小项目，换成大项目这个差距只会越来越大。

Rspack（Rsbuild）打包表现和其他打包工具对比（1000 React components）：

image.png

以上数据来自 performance-compare benchmark。

谁在使用 Rspack

在字节跳动内部，Rspack 的周下载量超过 40 万，有超过 1000 个 Web 应用在使用 Rspack，包括 TikTok、抖音、飞书、Coze 等。也看到更多的企业级用户开始使用 Rspack，包括微软、Amazon、阿里巴巴、Intuit、Bit.dev、Discord 等等

image.png

总结

通过体验实际项目，我们发现Rspack确实拥有了足以挑战Vite的性能表现，在这一点上确实足够令人惊喜。但是作为一名成熟的前端开发，我们不得不更加全面的看待这一全新的打包工具，甚至质疑！

目前来看，Rspack有以下缺点不容忽视：

  • 成熟度： Vite 经过较长时间的发展和广泛的使用，在稳定性和成熟度上可能更高。Rspack 相对较新，可能在一些复杂场景下会遇到一些尚未发现或解决的问题。
  • 生态支持： Vite 拥有庞大的插件生态系统，由于其推出时间较早，很多流行的前端框架和库都有专门为 Vite 优化的插件。而 Rspack的插件生态可能相对不够完善，在某些特定需求下可能难以找到合适的插件来满足。
  • 社区资源和文档： Vite 的社区更加庞大和活跃，这意味着在遇到问题时更容易找到解决方案和参考资料。其文档也相对更加丰富和详细。Rspack 的社区和文档可能还在发展过程中，对于一些不常见的问题可能缺乏足够的支持。

目前来看，Rspack 在发展的道路上依然任重而道远。毕竟它作为一个相对较新的工具，在众多成熟的打包方案中崭露头角并非易事。

然而，令人感到欣慰的是，尽管目前在整个社区范围内，专门论述 Rspack 的文章屈指可数，但是我们却能在一些与打包相关的文章的评论区中，偶然看到一些用户对于 Rspack 的使用给予了高度好评。 这无疑像是在漫漫征途中看到了一抹曙光，或许这真的会成为一个充满希望与无限可能的良好开端，让我们共同期待 Rspack 在未来能够绽放出更加绚烂的光彩。

avatar
文章
阅读
粉丝