短短几年,为什么 Vite 会变得这么受欢迎?

2024年 6月 3日 48.2k 0

在现在的前端领域中,Vite 的人气超级之高。

自2020年4月首次亮相以来,这个项目迅速获得了极高的关注。到目前为止,它在 GitHub 上已累积超过 64k star,每周的下载量达到了1200万次以上。它现已被广泛应用于多个开源框架,包括Nuxt、SvelteKit、Astro和SolidStart等。

什么是 Vite?

Vite,发音为/vit/,在法语中意为“快速”,这个名字确实很贴切。

Vite 是一款现代化的 JavaScript 构建工具,它提供针对常见 Web 模式的开箱即用支持,优化的构建过程,以及与 rollup 的灵活性和成熟度结合。此外,它还整合了 esbuild 和原生 ES 模块,实现了一个快速的无捆绑开发服务器。

这个工具是由 Vue.js 的创始人Evan You设计的,目的是简化捆绑过程,减少开发人员在启动开发服务器及文件编辑后重新加载时遇到的瓶颈问题。

Vite 核心特性

当您使用 Vite 时,首先显著的不同是开发服务器几乎即刻启动。通过访问vite.new,您可以立即查看其效果。这是因为 Vite 采取了一种按需服务的方法,它并不预先捆绑所有源代码,而是根据浏览器的请求实时转换您编写的模块为浏览器能够理解的本地 ESM 模块。Vite 支持TypeScript、PostCSS、CSS 预处理器、JSON 和 WASM等,还能通过一个不断增长的插件生态系统来扩展支持您喜欢的框架和工具。

在开发过程中,每当您更改项目中的文件时,Vite 利用应用程序的模块图仅对受影响的模块进行热重新加载(HMR),允许开发者实时预览他们的更改及其对应用程序的影响。Vite 的 HMR 速度极快,它支持编辑器的自动保存功能,使得开发体验与在浏览器开发工具中修改 CSS 类似

此外,Vite 在开发阶段还会执行依赖预引用,使用esbuild来引用和缓存您的依赖项,这有助于加速未来服务器启动和依赖项加载速度。特别是对于导出许多小模块的依赖项(如 lodash),这种方式可以显著提升加载效率,因为浏览器只需加载少数几个模块块。它还支持在依赖项中包含CommonJS和UMD代码,因为这些代码会被转换为本地 ESM 模块。

当您准备将应用程序部署时,Vite 利用优化的 Rollup 设置进行构建。它实施 CSS 代码分割,添加预加载指令,并优化异步块的加载,一切无需手动配置。Vite 的 rollup 兼容插件 API 适用于开发和生产环境,便于您扩展和定制构建流程。

使用 Vite 的好处

短短几年,为什么 Vite 会变得这么受欢迎?-1

使用 Vite 有几个主要好处。以下是我们最喜欢的一些:

开源且独立

Vite 是一个由开源开发者社区共同开发的独立项目,受到来自各种背景的开发者团队的领导。它的核心仓库已经收到了超过900名贡献者的贡献,这表明它得到了积极的开发和维护。这种持续的贡献反映了多样化的产品需求,并且功能集也在不断地扩展和更新。

本地开发就是快

Vite 的核心优势之一是它的开发体验(DX),它能确保即便是应用程序规模增大,开发者仍能享受到快速的保存和重新加载体验。这种高效的反馈循环使得开发者可以持续高效地工作,无需担心性能下降。

良好的生态系统支持。

Vite 同时也享受着广泛的生态系统支持。由于其受欢迎程度,许多框架和工具都选择默认支持 Vite 或提供一流的兼容性。这使得这些项目的维护者可以基于一个共同的平台共享和改进工具,减少了重复工作,让他们能专注于开发用户所需的功能。

易于扩展

Vite 的扩展性也表现出色,得益于其对Rollup插件 API 的有效利用。这个插件系统允许开发者利用 Vite 核心的功能,并且社区中已经有许多高质量的插件可供使用,例如vite-plugin-pwa和vite-imagetools。

构建的神器

作为现代开发生态系统的重要组成部分,Vite 与其他工具如Volar、Nitro和Dev Toolkit一道,形成了一个强大的框架和工具集合。Volar 为特定编程语言如 Vue、MDX 和 Astro 提供高性能的编辑体验,Nitro 则是一个独立的服务器工具包,它支持各大主要部署平台。这些工具共同构成了一个通用的框架开发基础,为开发者提供了一个坚实的支持平台,帮助他们构建更加复杂和功能丰富的应用。

Vite 的未来

在最近的 ViteConf 上,Evan 提到,尽管 Vite 取得了显著的成就,但项目仍存在一些挑战和问题。他详细讨论了 Vite 目前依赖 Rollup 来进行生产级构建的情况,并指出相比于如 esbuild 或 Bun 这样的本地打包工具,Rollup 的速度较慢。此外,尽管 Vite 努力缩小开发环境与生产环境间的差异,但由于 Rollup 和 esbuild 之间的性能差异,某些不一致性还是难以避免

Evan 现领导的新团队正在开发一种名为 Rolldown 的工具,这是一个基于 Rust 的 Rollup 替代品,建立在名为 OXC(JavaScript 氧化编译器)的平台上,目的是整合 Rollup 的灵活性和 esbuild 的高速性能。Rolldown 的设计目标是替代 Vite 中的 Rollup 和 esbuild,以此来提供统一的基础,减少不一致性,简化代码的维护,并加速构建过程。虽然 Rolldown 还在初期阶段,但已经展现出了潜力,并且该项目已经开源。Rolldown 团队正在积极寻找感兴趣的开发者加入他们的 GitHub 仓库和 Discord 社区来共同推动这一项目

同时,Vite 团队也在不断优化和改进 Vite,这些改进从 vite-node(为 Vitest 和 Nuxt Dev SSR 提供动力的引擎)开始,并已经扩展到对 Vite API 的全面审查。预计在即将到来的 Vite v6 中将引入一个新的环境 API,这是自 Vite 2 发布以来的一次重大更新。这将允许开发者在多种环境中运行代码,通过 Vite 插件管道实现,从而为 workerd、RSC 等提供更好的支持

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论