Vite 6.0 带来了大量更新与优化,旨在简化开发流程、提升性能,并解决现代 Web 开发中的诸多挑战。本次更新引入了 实验性环境 API 和现代化的工具链,进一步巩固了 Vite 作为开发者首选工具的地位。以下是关于新特性、生态发展以及重要更新的全面解读。
Vite 生态的快速成长
过去一年,Vite 的 npm 每周下载量从 750 万飙升至 1700 万,增长势头惊人。包括 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 和 RedwoodJS 在内的主流框架都将 Vite 作为构建的核心工具,提供更快的构建速度和更高效的开发体验。Google、Microsoft、NASA 和 Shopify 等知名企业也将 Vite 纳入工作流程,充分体现了它在各行业中的影响力。
此外,为了促进社区合作并分享实践经验,Vite 正邀请企业分享其使用案例,这将进一步展示其在各种领域中的价值。
ViteConf 2024 的亮点
由 StackBlitz 主办的第三届 ViteConf 汇聚了开发者和贡献者,共同庆祝 Vite 的技术进步。今年大会规模空前,并带来了以下重要更新:
VoidZero:专注于高性能开源 JavaScript 工具链的新公司,正在开发的工具 Rolldown 和 Oxc 将与 Vite 深度集成。
bolt.new:StackBlitz 发布的创新 Remix 应用,结合 Claude 和 WebContainers,支持开发者快速构建、运行并部署全栈应用。
Storybook 测试升级:Storybook 展示了基于 Vitest 的新测试功能,为开发工作流提供更强大的支持。
此外,Vite 官方网站(vite.dev)焕新上线,展现了其发展过程中更加成熟的形象。
Vite 6.0 的主要更新与改进
1. resolve.conditions
默认值更新
以前,resolve.conditions
的默认值是空数组 []
,并由内部自动添加某些条件。而在 Vite 6 中,这些条件(如 ['module', 'browser', 'development|production']
)不再默认添加,开发者需手动指定。
提供了新的默认值 defaultClientConditions
和 defaultServerConditions
,如果你使用了自定义条件(例如 ['custom']
),需更新为 ['custom', ...defaultClientConditions]
。
2. 改进的 JSON 处理
Vite 6 在开启 json.stringify: true
的同时默认保留 json.namedExports
,并新增 json.stringify: 'auto'
,仅对大型 JSON 文件进行序列化。可以显式设置 json.namedExports: false
来关闭命名导出。
3. HTML 的资产处理扩展
从原先仅支持 <link href>
和 <img src>
,扩展到更多 HTML 元素,具体支持列表详见官方文档。如果想跳过某些元素的处理,可以添加 vite-ignore
属性。
4. 默认使用现代 Sass API
现代 Sass API 成为默认选项,旧版 API 仍可通过 css.preprocessorOptions.sass.api: 'legacy'
使用,但将在下个大版本中移除。迁移细节可参考 Sass 文档。
5. CSS 输出文件名可自定义
库模式下,CSS 文件的默认输出名从固定的 style.css
改为根据 package.json
中的 name
生成。需要保留原名称的项目可以设置 build.lib.cssFileName: 'style'
。
6. 更新 postcss-load-config
升级到 v6 后,TypeScript 配置需使用 tsx
或 jiti
,YAML 配置则需加载 yaml
模块。
7. 实验性环境 API
新推出的环境 API 缩小了开发和生产环境的差距,支持开发者构建更贴近生产环境的工具链。这一功能将为 JavaScript 生态带来更多创新可能。
适用场景:
单页应用(SPA)开发者:工作流无任何变化,依然高效快捷。
自定义 SSR 应用开发者:框架作者和插件维护者可以利用新 API 简化开发流程,同时向后兼容现有的 SSR 配置。
插件开发者:新 API 提供更多控制力,帮助构建更强大的插件。
Node.js 兼容性
Vite 6 支持 Node.js 18、20 和 22,不再支持 Node.js 21。未来版本可能对较旧的 Node.js 版本逐步停止支持。
总结
Vite 6.0 通过引入创新功能和生态改进,巩固了其在现代前端开发中的核心地位。从其广泛的行业应用到对开发者体验的优化,Vite 不仅是一款工具,更是推动 Web 开发的强大引擎。如果你正在寻找一款高效的前端工具,不妨试试 Vite 6.0,它将助你构建更快速、更高质量的应用。
最后:
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读