新一代打包工具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

相关推荐
zh73141 小时前
支付宝沙盒模式商家转账经常出现 响应异常: 解包错误
前端·阿里云·php
ZHOU_WUYI1 小时前
用react实现一个简单的三页应用
前端·javascript·react.js
samroom2 小时前
Vue项目---懒加载的应用
前端·javascript·vue.js·性能优化
手机忘记时间2 小时前
在R语言中如何将列的名字改成别的
java·前端·python
郝郝先生--2 小时前
Flutter 异步原理-Zone
前端·flutter
花开花落的博客3 小时前
uniapp 不同路由之间的区别
前端·uni-app
whatever who cares3 小时前
React 中 useMemo 和 useEffect 的区别(计算与监听方面)
前端·javascript·react.js
老兵发新帖3 小时前
前端知识-hook
前端·react.js·前端框架
t_hj3 小时前
Ajax的原理和解析
前端·javascript·ajax
蓝婷儿4 小时前
前端面试每日三题 - Day 29
前端·面试·职场和发展