Vue 应用程序的构建过程：Rollup 与 Rolldown

作者：Andy Li

构建工具对于现代 Web 开发至关重要，它充当将原始代码转换为浏览器可以有效理解和执行的内容的引擎。如果没有快速、可靠的构建工具，您在启动开发服务器时可能会面临令人沮丧的漫长启动时间，甚至简单的代码更改也可能需要宝贵的几秒钟才能反映在浏览器中，从而扰乱您的开发流程和生产力。

在本文中，我们将讨论 Vue.js 应用程序（或 React.js 应用程序）构建过程中涉及的所有内容，包括 Vite、esbuild、Rollup 和 up-and-由 Evan You（Vue.js 和 Vite.js 的创建者）正在构建的即将推出的工具，名为 Rolldown.

首先，我们从Vite开始。

---

Vite目前的构建流程

与许多其他框架一样，Vue.js 使用 Vite 作为其构建工具。

Vite有两种不同的模式：开发模式和生产模式。它们在幕后的实现方式不同。

Vite 针对开发环境和生产环境使用不同的构建策略，以针对其独特需求进行优化。在开发过程中，重点是提供快速反馈和快速热模块更换（HMR），以获得流畅的开发人员体验。在生产中，优先级转移到为最终用户生成优化的高性能捆绑包。

让我们来探讨一下Vite如何处理开发构建，其创新方法的亮点在哪里。

---

开发模式下Vite

在开发模式下，构建速度至关重要。 Vite 不是在每次更改后捆绑代码，而是直接以 ESM 格式提供修改后的文件（如 Vue 组件的 <script> 代码），从而以最少的处理实现快速浏览器更新。</script>

在实践中，Vite 将 TypeScript 代码转换为浏览器兼容的 JavaScript。虽然开发构建所需的步骤比生产少（我们将很快探讨），但快速转换代码仍然要求很高，特别是因为更改需要在几秒钟内出现在浏览器中。

这就是为什么 Vite 使用 esbuild 这个用 Go 编写的高性能工具。由于 Go 直接编译为机器语言（处理器可以执行的低级二进制指令），因此 esbuild 提供了卓越的速度 - 这是现代开发服务器设置的关键要求。

---

生产模式下的Vite

虽然构建速度在生产中很重要，但这并不是首要任务。创建生产构建时，无论使用哪种构建工具，您都可能需要等待一些时间。与开发模式（一次仅处理一个文件及其依赖项）不同，生产构建必须从头开始捆绑所有代码，这使得即时构建变得不可能。

此外，生产构建通常需要额外的步骤。例如，您可能需要为旧版浏览器转译 JavaScript 代码——当您可以简单地使用现代浏览器时，这在开发过程中是不必要的。

其他关键的生产构建步骤包括缩小（从代码中删除不必要的字符，同时保留功能）和代码拆分（将代码分解为按需加载的较小块）。这些过程直接影响代码的运行时性能。

生产构建的首要任务是确保代码在用户的浏览器中高效运行。这优先于构建速度，因为生产构建偶尔会发生，而用户会频繁访问您的网站。

Vite选择Rollup进行生产捆绑，是因为其丰富的插件生态，可以直接与Vite一起使用。由于 Vite 的插件架构与 Rollup 相似，因此这种兼容性有助于培育蓬勃发展的插件社区，并有助于 Vite 的广泛采用。

？
总结一下： Vite 使用 esbuild（速度优化）进行开发构建，使用 Rollup（以其插件而闻名）进行生产构建。

虽然这个设置运行良好，但一个重大变化即将到来：Vite 很快将用一个名为 Rolldown 的新工具取代 esbuild 和 Rollup。

在探索 Rolldown 之前，我们先来看看 Vite 目前的设置所面临的挑战，这些挑战导致了 Rolldown 的发明。

---

Vite 的问题

当构建工具或捆绑器处理您的源代码时，它首先创建一个抽象语法树 (AST) - 一种表示代码语法和结构的树状数据结构。例如，函数声明将成为 AST 中的“FunctionDeclaration”节点，其子节点为其参数和主体。

使用两个不同的工具来解析相同的源代码对于代码转换来说效率很低，因为单个工具（或一组兼容的工具）可以在整个过程中重用解析的结果。

esbuild在处理Vite的开发模式的同时，也通过缩小在生产模式中发挥作用。这意味着 esbuild 和 Rollup 在构建过程中按顺序运行。对于 React 应用程序，随着 SWC（另一种用 Rust 编写的构建工具）与 esbuild 和 Rollup 一起添加，该过程变得更加复杂。

按顺序使用多个工具会导致效率低下，因为每个工具必须独立解析代码并在它们之间传递结果。虽然 Rollup 强大的插件生态系统使其对于生产构建很有价值，但与 esbuild 相比，其速度较慢，这是一种权衡。理想的解决方案是一个将 esbuild 的性能与 Rollup 的可扩展性相结合的工具，而这正是 Rolldown 想要实现的目标。

---

滚降简介

Rolldown 是用 Rust 编写的捆绑器，Rust 是一种编程语言，与 Go 一样，可以直接编译为机器代码。这意味着 Rolldown 将达到与 esbuild 类似的速度。

由于 Rolldown 与 Rollup 共享类似的插件 API，因此大多数现有的 Vite 兼容插件将与新的 Rolldown 支持的 Vite 版本无缝协作。

本质上，您将能够像现在一样使用 Vite，只是性能有所提高。

那么我们所说的速度要快多少？如果速度是主要卖点，那么它需要明显更快才能证明采用新工具的合理性，对吧？

根据 Evan You 的基准测试，在测试 Vue 核心源代码的捆绑速度时，Rolldown 的构建设置的执行速度比基于 Rollup 的设置快 7 倍以上。

该基准测试专门衡量生产构建时间。 开发怎么样？

目前Vite使用esbuild进行开发。根据 Evan You 的基准测试，Rolldown 的执行速度几乎是 esbuild 的两倍。由于 esbuild 已经具有高性能，因此这种改进比 Rollup 比较更温和。

所有这些性能升级均由 Rolldown 中的一套底层工具提供支持。其中包括新的解析器、linter、解析器、变压器等 - Oxc 项目的所有部分（由 Rolldown 团队创建）。

Oxc 是一套 JavaScript 语言工具。尽管这些工具是在 Rolldown 中使用的，但它们也可以在非 Rolldown 上下文中单独使用。例如，Oxc linter 比 ESLint 更快，因此可以在 CI 工作流程中使用它在运行 ESLint 之前快速捕获代码错误。

Oxc 工具通常比其他类似工具更快，因为它们是从头开始编写的，以性能为主要目标。

---

Vite的未来

虽然 Rolldown 尚未做好生产准备，但预计会在 2024 年底之前发布具有 Rolldown 集成功能的 Vite alpha 版本。我们将在未来几个月继续报道 Vue、Vite 和 Rolldown 的最新进展。

如果您想了解有关 Vite 的更多信息，请查看 Vue Mastery 上的闪电快速构建课程，该课程由 Vite 的创建者 Evan You 亲自授课。

最初发布于 https://www.vuemastery.com 2024 年 12 月 4 日。

---

以上是Vue 应用程序的构建过程：Rollup 与 Rolldown的详细内容。更多信息请关注PHP中文网其他相关文章！