Vue 应用的构建过程：Rollup 与 Rolldown 的比较
构建工具对于现代 web 开发至关重要，它将原始代码转换为浏览器可以执行的代码。
在本文中，我们将讨论 Vue.js 应用的构建过程，包括 Vite、esbuild、Rollup 以及由 Evan You 正在开发的一个新兴工具——Rolldown。
首先，让我们从 Vite 开始。
Vite 的构建过程
与许多其他框架一样，Vue.js 使用 Vite 作为其构建工具。Vite 有两种不同的模式：开发模式和生产模式，它们在后台的实现方式不同。
Vite 针对开发环境和生产环境采用不同的构建策略，以满足各自独特的需求。在开发过程中，重点是提供快速反馈，实现顺畅的开发体验。在生产环境中，优先级则转移到为最终用户生成优化的、高性能的代码。
让我们探讨一下 Vite 如何处理开发构建。
Vite 在开发模式下的表现
在开发模式下，构建速度至关重要。Vite 不会在每次更改后捆绑代码，而是直接使用 ESM 提供修改后的文件，从而实现浏览器的快速更新。
在开发中，Vite 将 TypeScript 代码转换为浏览器兼容的 JavaScript。虽然开发构建所需的步骤比生产构建少，但快速转换代码仍然具有挑战性。
这就是 Vite 使用 esbuild 的原因，esbuild 是一个用 Go 编写的高性能工具。直接编译为机器语言，esbuild 提供了卓越的速度。
Vite 在生产模式下的表现
在生产环境中，虽然构建速度很重要，但不是首要任务。在创建生产环境包，无论使用哪种构建工具，都需要一些等待时间。与开发模式不同，生产构建必须从头开始捆绑所有代码，这使得即时构建变得不可能。
此外，生产构建需要额外的步骤。例如，你可能需要为低版本浏览器转译 JavaScript 代码。
生产构建还需要压缩和代码分割。这些过程直接影响代码的运行时性能。
生产构建的首要任务是确保代码在用户的浏览器中运行。这比构建速度更重要。
Vite 选择 Rollup 进行生产打包，因为其丰富的插件生态系统可以与 Vite 一起使用。由于 Vite 的插件架构与 Rollup 的类似，这种兼容性有助于培养一个繁荣的插件社区。
总结： Vite 使用 esbuild（优化速度）进行开发构建，使用 Rollup进行生产构建。
虽然这种配合一直运行良好，但即将发生重大变化：Vite 很快将用一个名为 Rolldown 的新工具取代 esbuild 和 Rollup。
在探讨 Rolldown 之前，让我们先看看 Vite 当前配置中存在的问题。
Vite 存在的问题
当构建工具处理源代码时，首先会创建一个抽象语法树（AST），表示代码的语法和结构。
使用两个不同的工具解析同一段源代码对于代码转换来说是低效的。
虽然 esbuild 是处理 Vite 的开发模式，但它通过压缩参与生产模式。这意味着 esbuild 和 Rollup 在构建过程中是顺序运行的。对于 React 应用程序，随着 SWC 的加入，这一过程变得更加复杂。
在构建过程中使用多个工具会带来低效，因为每个工具都必须独立解析代码，并在它们之间传递结果。虽然 Rollup 的强大插件系统使其在生产构建中具有优势，但其速度比 esbuild 慢。理想的解决方案是一个结合了 esbuild 性能和 Rollup 可扩展性的工具——而这正是 Rolldown 旨在实现的目标。
Rolldown 介绍
Rolldown 是一个用 Rust 编写的打包器，像 Go 一样直接编译为机器代码。
由于 Rolldown 与 Rollup 共享类似的插件 API，大多数现有的 Vite 插件将适用于新的 Vite。
你将能够像现在一样使用 Vite，只是性能有所提升。
那么，速度有多快呢？ 如果速度是主要卖点，它需要更快，对吧？
根据 Evan You 的基准测试，将 Vue 核心源代码的打包，Rolldown 的构建比 Rollup 快 7 倍以上。
这个基准测试专门衡量生产构建。那么开发呢？
目前，Vite 在开发中使用 esbuild。根据 Evan You 的基准测试，Rolldown 比 esbuild 快两倍。
所有这些性能提升都由 Rolldown 内部的一套工具提供支持。这些工具包括一个新的解析器、lint 工具、转换器等。
Oxc 是一套 JavaScript 语言工具。尽管这些工具用于 Rolldown，但它们也可以单独使用。例如，Oxc linter 比 ESLint 更快，可以在 CI 工作流中使用，快速发现代码错误，然后再运行 ESLint。
Oxc 工具通常比其他类似工具更快，因为它们是从头开始编写的，以性能为主要目标。
Vite 的未来
如果你想了解更多关于 Vite 的信息，可以查看 Vue Mastery 上的课程《Lightning Fast Builds》，由 Vite 的创建者 Evan You 亲自教授。
