尤雨溪：Vite 和 JavaScript 工具的未来

前言

前段时间，尤雨溪在 js nation 大会上的直播内容，终于上线了，今天我整理了出来，分享给大家

萌萌哒草头将军 用简单的方法分享React、Vue、Svelte、SolidJS等框架 185篇原创内容 公众号

正文

Vite 的崛起与影响力

Vite 是一个现代化的 Web 构建工具，以其快速的开发服务器启动和热模块替换（HMR）功能而闻名，Vite 每周在 NPM 上有 2900 万次下载，

vite 下载量

vite 下载量

GitHub 上有超过 1100 位贡献者，并且已经被许多主要公司用于生产环境。它为下一代 Web 应用提供了共享基础设施，成为现代前端开发的标杆。

vite 使用者

vite 使用者

Vite 的成功得益于其基于原生 ES 模块（ESM）的开发服务器，与传统的 Webpack 等工具相比，它显著减少了启动时间和构建时间。这种设计使其特别适合 React、Vue 和其他现代框架的开发。

Vite 面临的挑战

尽管 Vite 表现出色，但它也面临一些挑战。它依赖于 ESBuild、Rollup 和 SWC 等工具，这些工具在职责上有重叠。

Vite 的底层

Vite 的底层

例如，ESBuild 用于开发时的快速转换，Rollup 用于生产环境的打包，而 SWC 提供额外的优化功能。由于这些工具使用不同语言（JavaScript、Go、Rust）并需要频繁传递数据，效率问题逐渐显现。

此外，Vite 的插件生态虽然强大，但与 Rollup 插件的兼容性仍需改进，尤其是在处理复杂场景时。这些挑战促使 VoidZero 团队探索更高效的解决方案。

Rolldown：专为 Vite 打造的捆绑器

为了解决依赖重叠和效率问题，VoidZero 团队开发了 Rolldown，一个专为 Vite 设计的捆绑器。Rolldown 使用 Rust 编写，旨在取代 Rollup，提供更高的性能和更好的依赖管理。

Rolldown

Rolldown

它支持 Rollup 插件，具有高度兼容性，并引入了多项高级功能，包括：

• 内置转换：简化模块处理流程。
• 节点兼容分辨率：支持 Node.js 模块解析规则。
• 多联邦支持：优化模块联邦场景。

Rolldown 的目标是成为 Vite 的核心捆绑器，减少对外部工具的依赖，同时提升构建速度和稳定性。

Rust 在 Vite 生态中的角色

Rust 在 Rolldown 和其他 Vite 相关工具中的使用是一个关键决策。Rust 以其高性能和内存安全特性著称，其生态系统在 JavaScript 工具领域已相当成熟。例如，SWC 和 Turbopack 等工具也采用了 Rust。Rust 与 JavaScript 的互操作性极佳，使其成为解析、转换和捆绑的理想选择。

Rust

Rust

通过 Rust，Vite 生态系统能够处理大规模项目，同时保持低内存占用和高执行效率。这种技术选择为 Vite 的未来发展奠定了坚实基础。

JavaScript 生态系统的碎片化

当前的 JavaScript 生态系统在每个层面都高度碎片化，包括解析器（如 Babel、SWC）、转换器、测试运行器（如 Jest、Vitest）、链接器和格式化器（如 Prettier、Biome）。这种多样性虽然促进了创新，但也带来了决策疲劳，尤其是对新手开发者来说，选择合适的工具组合可能令人望而却步。

碎片化

碎片化

这种碎片化导致开发者需要花费大量时间配置工具链，而 VoidZero 的使命正是解决这一问题。

VoidZero 的使命：统一工具链

VoidZero 致力于构建一个统一的 JavaScript 工具链，提供连贯的开发体验，减少决策疲劳。团队正在开发多个开源组件，包括：

• Vite：核心构建工具。
• Vitest：快速的测试运行器。
• Rolldown：高性能捆绑器。
• OXC：语言工具链，包括解析器、转换器和压缩器。

通过这些组件，VoidZero 希望打造一个类似于 Rust 的 Cargo 的综合工具包，为开发者提供开箱即用的解决方案！

VoidZero 工具包

VoidZero 工具包

Vite+：端到端工具链

Vite+ 是 VoidZero 推出的端到端工具链，旨在为 Vite 用户提供无缝升级体验。

Vite+

Vite+

它集成了额外的命令和功能，类似于 Rust 的 Cargo，提供以下特性：

• 全面插件接口：支持框架集成，如自定义测试环境和开发工具面板。
• 统一命令：简化开发、测试和构建流程。
• 扩展功能：支持单仓库意识和构建编排。

Vite+ 的目标是成为一个综合性的工具平台，让开发者无需频繁切换工具。

ViteTest：功能齐全的测试解决方案

ViteTest 是一个功能完备的测试框架，专为 Vite 生态设计。

ViteTest

ViteTest

它支持以下功能：

• 浏览器模式：在真实浏览器环境中运行测试。
• 组件测试：支持 React、Vue 等框架的组件测试。
• 基准测试：评估代码性能。
• 测试隔离：防止共享全局状态问题，确保测试正确性。

ViteTest 的设计优先考虑正确性和性能，使其成为现代前端测试的理想选择。

OXC：高性能语言工具链

OXC 是一个支持 Vite 的语言工具链，包含解析器、链接器、转换器和压缩器。它使用 Rust 编写，优化了性能，并与 Vite 无缝集成。OXC 的目标是取代传统的 Babel 和 Terser，提供更快的代码处理速度。

OXC

OXC

TS-down：优化 TypeScript 打包

TS-down 是 Vite+ 中的库捆绑器，专注于 TypeScript 的 DTS（声明文件）生成和打包。

TS-down

TS-down

它通过减少包大小和提高类型检查速度，优化了 TypeScript 项目的构建体验。

未来计划

VoidZero 团队为 Vite 生态制定了多项未来计划，包括：

• 单仓库意识：支持 Monorepo 项目，提高多包管理效率。
• 构建编排：优化大型项目的构建流程。
• 框架-like 功能：提供更高级的开发体验。
• 稳定环境 API：确保工具链的长期兼容性。
• 整合 Rolldown：实现更快的生产构建。

这些计划表明 Vite 生态系统将继续快速发展，为开发者提供更强大的工具支持。

单仓库意识

单仓库意识

最后

总的来说，Vite 和 VoidZero 的努力正在重塑 JavaScript 工具链的未来。通过引入 Rolldown、Vite+、ViteTest 和 OXC，团队正在构建一个统一、高效且用户友好的工具生态系统，这将极大地简化开发者的工作流程，并为下一代 Web 应用的开发提供强大的支持！

视频地址：https://gitnation.com/contents/vite-and-the-future-of-javascript-tooling