基于 Rust 的 JS 打包工具:Rolldown 正式开源!

Rolldown 是一个用 Rust 编写的 JavaScript 捆绑器,旨在成为 Vite 未来使用的捆绑器。它提供了与 Rollup 兼容的 API 和插件接口,但在范围上更类似于 esbuild。

🚧 提示

Rolldown 目前正在积极开发中,尚不适用于生产环境。但现在已经将其开源,以便开始与社区贡献者合作。

Rolldown 由来

Rolldown 旨在成为 Vite 未来使用的核心底层打包工具,目前 Vite 内部依赖于两个打包工具:

  • esbuild:Vite 使用 esbuild 进行依赖预打包、TypeScript / JSX 转换、目标降级和代码压缩。
  • Rollup:Vite 将 Rollup 用于其生产构建,并支持与 Rollup 兼容的插件接口。

Vite 之所以使用两种不同的打包工具,是因为虽然它们都很棒,但每个都缺少另一个提供的某些功能:esbuild 速度快且功能丰富,但其输出特别是在分块拆分方面存在限制,并不理想用于应用程序捆绑;Rollup 对于应用程序捆绑而言经过了时间考验且成熟稳定,但比编译为本机语言的打包工具慢得多。

使用两种不同的打包工具在几个方面都存在明显弊端:输出之间微妙差异可能导致开发和生产构建之间行为差异;用户源代码会被不同工具重复解析、转换和序列化,在整个生产构建过程中会带来许多可以避免的额外开销。

理想情况下,我们希望 Vite 能够利用单一打包器提供原生级性能、内置变换以避免解析/序列化开销、与 Rollup 兼容插件接口以及适合大规模应用程序的高级构建输出控制。

这就是为什么我们需要 Rolldown 的原因。

Rolldown 使用 Rust 编写,并基于 Oxc 构建,目前利用其解析器和解析程序。我们还计划在将来当 Oxc 的转换器和缩小器可用时利用它们。

我们的长期目标是让 Vite 用户(直接或间接通过框架)能够顺畅地过渡到内部使用 Rolldown 的 Vite 版本。与此同时 Rolldown 也可以作为一个独立的捆绑工具直接使用。

Rollup API 兼容性

Rolldown 的目标是尽可能地与 Rollup 的 API 和插件接口保持一致,以便促进采用。在简单的使用情况下,它很可能能够作为一个即插即用的替代品。然而,在涉及高级选项时,边缘情况下可能会存在一些细微差异。

我们最初打算将 JS 移植到 Rust 中,但很快意识到为了实现最佳性能,我们必须优先考虑按照 Rust 工作方式编写代码。Rolldown 的内部架构更接近 esbuild 而不是 Rollup,并且我们的块拆分逻辑可能会有所不同于 Rollup。

Rolldown 的范围也比 Rollup 更广泛,并且更类似于 esbuild。它具有内置的 CommonJS 支持、node_modules 解析,并且未来还将支持 TypeScript / JSX 转换和代码压缩。

总结

Rolldown 是一个备受瞩目的前端项目,旨在解决当前打包工具的性能瓶颈和兼容性问题。它采用高效的 Rust 语言编写,与 Rollup API 保持兼容,并有望带来显著的性能提升。Rolldown 还致力于实现单一解析和 AST 树标准化,有望为开发环境和构建时间带来前所未有的性能飞跃。若成功实现这些目标,Rolldown 将成为前端开发领域的关键引擎,为开发者带来深刻的变革。

往期回顾

  1. 初步体验 Tailwind CSS v4,解析 v4 路线图和变化!
  2. Tailwind CSS v4 预览版:高性能 CSS 新引擎!
  3. UI 和 UX 全面升级,Node.js 新官网预览版发布!
  4. Node.js 特别吉祥物:「火箭龟」引领新篇章!
  5. Bun v1.0.30 正式发布,即将提供 Windows 稳定版本!
相关推荐
Thomas.Sir29 分钟前
Vue 3:现代前端框架的架构革命
前端·vue.js·web·大前端
清空mega30 分钟前
《Vue3 模板语法与常用指令详解:插值、绑定、件、条件渲染、列表渲染一次学会》
前端·javascript·vue.js
Luna-player40 分钟前
将Vue 项目上传到Gitee流程步骤
前端·vue.js·gitee
easyboot43 分钟前
vxetable的表格滚动条加粗功能
前端·javascript·vue.js
yangyanping2010844 分钟前
Vue入门到精通五之yarn部署项目
前端·javascript·vue.js
FFF_634560231 小时前
使用轮播组件 swper 插件
前端·javascript·vue.js
Luna-player1 小时前
npx create-vue 创建 Vue 3 项目的交互式配置界面
前端·javascript·vue.js
还是大剑师兰特1 小时前
const { proxy } = getCurrentInstance() 的正确使用方法
前端·javascript·vue.js
Reisentyan1 小时前
[vue 3]HTML Learn Data Day 8
前端·vue.js·html
网络点点滴9 小时前
组件通信props方式
前端·javascript·vue.js