新一代打包工具rolldown

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

背景

为什么要开发 Rolldown

  • Rolldown 旨在作为Vite未来使用的低级捆绑器

现状

  • Vite 使用 esbuild 进行依赖预捆绑 esbuild 速度极快且功能丰富,但是其输出,特别是在块分割限制方面,对于捆绑应用程序来说并不理想
  • Vite 使用 Rollup 进行生产构建,并支持与 Rollup 兼容的插件接口,Rollup 已经成熟并且经过了应用程序捆绑的严格测试,但是它比用编译为本地语言编写的捆绑器慢得多
  • 输出之间的细微差别可能会导致开发和生产构建之间的行为差异,在整个生产构建过程中,用户源被不同的工具重复解析、转换和序列化,从而导致了大量可以避免的开销

理想

  • 我们希望 Vite 可以利用一个提供原生级性能的单一捆绑器、避免解析 / 序列化开销的内置转换、与 Rollup 兼容的插件接口以及适合大规模应用程序的高级构建输出控制,这就是我们构建 Rolldown 的原因

rolldown生态

主要是两大阵营,webpack和vite 以及基于这两大阵营各种优化

  • webpack:大项目特别慢,js单线程带来了很多打包性能的问题
  • rspack:兼容webpack生态(loader,plugins)的rust框架 速度是webpack 100-300倍
  • turpack:webpack rust重构,不支持现有loader,plugins,极致性能,另一个是已有生态的迁移 速度比rspack快
  • vite: rollup线上打包 esbuild线下打包 速度是webpack 50-200倍
  • rolldwon: 先兼容rollup取代esbuild,然后代替rollup 大一统 速度比vite快

rolldown 目前来说需要配合vite打包 依靠oxc的parse lint相关能力 就目前rolldown好多代码都是来自于社区rspack作者,好多东西也可以和rspack复用

rolldown和rspack类似,内部为了兼容现有rollup现有插件采用了napi-rs来做rs和js桥接,牺牲了部分性能但是对于开发者无缝迁移更加友好 napi-rs基于Node.js的N-API(Node.js Addon API)构建。N-API是Node.js提供的一套稳定的、跨版本的API,用于在C/C++插件与JavaScript之间建立交互,底层基于FFI进行js和rust通信,整体社区能力也比较活跃,有很多node or rust包

rolldown部分源码解析

  • 主要有rolldown(js) rolldown_binding(rust) rolldown(rust)三部分组成
  • rolldown/packages/rolldown 提供了命令行能力和包的调用能力
  • rolldown/crates/rolldown_binding 提供node与rust的胶水代码
  • rolldown/crates/.. 实现了编译、转换、生成等功能

整体流程如上图所示,js主要做初始化参数构造和构建动作触发,rolldown_binding主要做插件定义,rolldown(rust)主要做plugin调用和生成,里边的plugin类似于webpack有很多,所有的功能都是通过plugin来做,各个plugin之间相互解耦共同完成打包构建

最后我们再看下rolldown roadmap

  • 尽可能与 Rollup 的 API 和插件接口保持一致,方便vite过渡到使用Rolldown
  • 想要解决Esbuild在输出上的问题,尤其是chunk分割限制的问题
  • 加快打包速度,使用native languages(rust)写bundler,避免生产构建中源码被不同工具重复解析、转化和序列化
  • chunk 分割逻辑可能与 Rollup 的不同
  • 范围上Rolldown 更类似于 Esbuild,带有内置的 CommonJS 支持、 node_modules解析并且将来还将支持 TypeScript / JSX、转换和压缩能力。
  • Rolldown 也可以直接作为独立的打包工具使用

期待rolldown越做越好 早日到1.0

相关推荐
江城开朗的豌豆1 分钟前
CSS篇:告别单调背景:CSS渐变的20种惊艳用法
前端·css·面试
江城开朗的豌豆1 分钟前
CSS篇:Flex布局核心属性详解:flex-grow/shrink/basis到底怎么用?
前端·css·面试
乡关何处2 分钟前
vue Element-ui对图片上传和选用时的比例控制
前端
Danny_FD2 分钟前
前端盒模型详解
前端·css
洛小豆2 分钟前
深入理解 JavaScript 的解构赋值
前端·javascript·typescript
樊小肆3 分钟前
Vue3 在线 PDF 编辑 1.0 保存、下载
前端·vue.js
WEI_Gaot3 分钟前
2 认识js的面向对象 和 Object 的属性描述符
前端·javascript
curdcv_po3 分钟前
🎉🚀React封装 微信扫码 登录组件
前端
三棵杨树6 分钟前
TypeScript从零开始(六):类
前端·typescript
Jenlybein7 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ 基础知识篇 ]
前端·javascript