这款“锈化”的开源JS打包工具发布1.0 Beta——性能强劲、尤雨溪主导

▲OSC源创会年终盛典
报名和红薯面基！

Rolldown 1.0.0-beta.1 发布了。

Rolldown 是使用 Rust 开发的 Rollup 替代品，它提供与 Rollup 兼容的应用程序接口和插件接口，但在功能范围上更类似于 esbuild。

作为一款现代化的打包工具，Rolldown 为开发者提供了更高效、便捷的开发体验。

Rolldown 是尤雨溪公司投资的 Vite 基建开源项目，采用 Rust 从零开始构建了一个 API 与 Rollup 兼容的 JavaScript 打包器。

下文来自 Rolldown 官方博客：《我们为什么需要打包器？》

01. 打包有用论

现代浏览器普遍支持原生 ESM 模块和 HTTP/2，所以部分开发者提倡即使在生产环境中，也采用非打包方案（unbundled）来发布 Web 应用。

但 Rolldown 团队认为，这种方案只适用小型应用，对于关注用户体验的性能敏感型应用，打包器仍不可或缺。

现代前端开发中，试图跳过构建步骤仍然不切实际。即使在完善的非打包部署模型中，构建步骤通常也无法避免。

举个栗子，Rails 8 默认的基于导入映射方案：所有 JS 资源仍需要构建，以便对资源指纹识别，并生成导入映射和模块预加载指令。这只是通过 importmap-rails 来“曲线救国”，从而不直接使用 JS 打包器。

此外，对于下列需求，非打包方案存在缺陷：

• 使用现代 JS 特性，比如 ES6+、TS 或 JSX。
• 使用打包器专属的优化，比如 tree-shaking（树摇）、代码分割或压缩。
• 使用依赖构建的库或框架。
• 发布源码未打包的 npm 依赖，导致请求过多。

JS 打包无用论的主要论点是构建时增加了复杂性，减慢了开发反馈循环。

02. 三大优化

本质上，打包器的存在是因为 Web 应用的独特限制：它们需要通过 网络 按需交付。

打包器可以通过 三大方案 来提高 Web 应用的性能：

03. 减少网络请求

首先，使用 HTTP/2 协议并不意味着可以 不再关心 请求数量。

尽管 HTTP/2 理论上 支持无限多路复用，但浏览器/服务器对每个连接 最大并发流数量 的默认限制大约为 100。

每个网络请求在服务器和客户端上都有固定开销，比如请求头处理、TLS 加密、多路复用等。更多请求意味着更多服务器负载，而实际并发性受限于服务器提供模块文件的速度。

即使使用 HTTP/2，包含数千个未打包模块的应用仍然会导致严重的网络瓶颈。

深度导入链还会导致网络瀑布（waterfall），即浏览器需要多次网络往返才能获取整个模块图。

这可以在通过 modulepreload 指令来稍微缓解，但是生成这些指令需要工具支持，并且在  标签中使用数千个 modulepreload 指令会导致 HTML 本身膨胀，这又是另一个性能问题。

打包可以通过将数千个模块组合成服务器和浏览器都可以轻松处理的最佳数量的 chunk（组件块），减少此类开销。

打包还可以拍平导入链深度来减少 waterfall，并且可以提供生成 modulepreload 指令所需的数据。

本质上，打包将组合模块图的工作移到构建时，而不是为每个访问者带来运行时成本。这使得大型应用在网络较差时，初次访问的加载速度也能显著加快。

3.1 缓存策略的权衡

打包无用论的另一个观点是，非打包方案允许单独缓存每个模块，减少更新应用时缓存失效的数量。

然而，如上所述，这样做的代价是降低了初始加载速度。

次优的打包配置可能会导致级联块哈希验证，导致用户在应用更新时必须重新下载应用的主要内容。

但这问题不大：打包器还可以利用导入映射和高级分块控制，限制哈希无效并提高缓存命中率。

Vite / Rolldown 计划会提供改进的、缓存更友好的默认分块策略。

04. 减少总字节数

打包还可以减少网络发送的 JS 体积。

首先，打包可以将多个模块提升到同一作用域，移除其中所有 import / export 语句。

其次，tree-shaking（消除死代码）是一种能且仅能通过静态分析源码来执行的构建时优化。

原生 ESM 会及早加载和执行所有内容，因此即使你只使用大模块的单个导出，也必须下载并执行整个模块。智能打包器可以从最终打包中移除未使用的 export，节省大量字节。

最后，在打包代码上执行压缩和 gzip 时，比单个模块效率更高。

综上所述，打包既可以减少用户下载的代码，也可以减少服务器使用的带宽。

05. 提高 JS 执行性能

JS 是一种解释型语言，现代 JS 引擎通常采用先进的 JIT 编译来提升运行速度。然而，解析和编译 JS 的成本也不低。

发送更少的 JS 代码不仅可以节省带宽，还意味着在浏览器中编译和执行的 JS 更少，应用的启动时间更短。

一些打包器/压缩器还可以执行诸如常量折叠/AOT（及早执行）之类的优化，使打包代码比手写的源码更高效。

高潮总结

由于 Web 应用依赖于网络交付，前端目前仍然需要一个高性能的打包器。

打包器起码有三大方案来优化性能，Rolldown 以 Vite 用户为起点，可以提供更加一致的打包体验，同时性能又比肩 esbuild + rollup。

来源：尤大为什么要投资打包器，Rolldown 公测版发布

阅读更多

Vue诞生10年，创始人尤雨溪推动“锈化”——通过Rust提升Web基础设施性能

相关来源