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

相关推荐
在水一缸4 分钟前
重塑前端开发认知:当 AI 遇见 HTML 的“不合理有效性”
前端·人工智能·html·ai编程·claude·前端开发
SwJieJie9 分钟前
Webpack vs Vite 构建工程化实战(Vue 项目深度解析)
前端·vue.js·webpack·node.js
swg32132117 分钟前
Redis实现主从选举
java·前端·redis
英俊潇洒美少年20 分钟前
前端核心性能指标全解(CWV三大指标+辅助指标、检测方式、优化、面试背诵)
前端
云水一下22 分钟前
Vue.js从零到精通系列(八):项目实战——构建一个完整的电商后台管理系统
前端·javascript·vue.js
Csvn23 分钟前
Vue3 响应式陷阱:解构赋值后页面不动了?Proxy 的"隐形成员"在搞鬼
前端·vue.js
LAM LAB29 分钟前
【Web】网页如何模拟移动端获取定位\定位模拟测试
开发语言·前端·javascript
yunceqing30 分钟前
从Excel调度到TMS平台:物流软件开发避坑清单
大数据·前端·网络·人工智能·excel·推荐算法
IT_陈寒32 分钟前
Redis主从切换把我坑惨了,这份血泪史你最好看看
前端·人工智能·后端
weixin_4713830334 分钟前
Taro-04-网络请求
前端·javascript·taro