Vite 6.0 帶來了大量更新與優(yōu)化，旨在簡化開發(fā)流程、提升性能，并解決現(xiàn)代 Web 開發(fā)中的諸多挑戰(zhàn)。本次更新引入了 實(shí)驗(yàn)性環(huán)境 API 和現(xiàn)代化的工具鏈，進(jìn)一步鞏固了 Vite 作為開發(fā)者首選工具的地位。以下是關(guān)于新特性、生態(tài)發(fā)展以及重要更新的全面解讀。

Vite 生態(tài)的快速成長

過去一年，Vite 的 npm 每周下載量從 750 萬飆升至 1700 萬，增長勢頭驚人。包括 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 和 RedwoodJS 在內(nèi)的主流框架都將 Vite 作為構(gòu)建的核心工具，提供更快的構(gòu)建速度和更高效的開發(fā)體驗(yàn)。Google、Microsoft、NASA 和 Shopify 等知名企業(yè)也將 Vite 納入工作流程，充分體現(xiàn)了它在各行業(yè)中的影響力。

此外，為了促進(jìn)社區(qū)合作并分享實(shí)踐經(jīng)驗(yàn)，Vite 正邀請企業(yè)分享其使用案例，這將進(jìn)一步展示其在各種領(lǐng)域中的價值。

ViteConf 2024 的亮點(diǎn)

由 StackBlitz 主辦的第三屆 ViteConf 匯聚了開發(fā)者和貢獻(xiàn)者，共同慶祝 Vite 的技術(shù)進(jìn)步。今年大會規(guī)模空前，并帶來了以下重要更新：

• VoidZero：專注于高性能開源 JavaScript 工具鏈的新公司，正在開發(fā)的工具 Rolldown 和 Oxc 將與 Vite 深度集成。
• bolt.new：StackBlitz 發(fā)布的創(chuàng)新 Remix 應(yīng)用，結(jié)合 Claude 和 WebContainers，支持開發(fā)者快速構(gòu)建、運(yùn)行并部署全棧應(yīng)用。
• Storybook 測試升級：Storybook 展示了基于 Vitest 的新測試功能，為開發(fā)工作流提供更強(qiáng)大的支持。

此外，Vite 官方網(wǎng)站（vite.dev）煥新上線，展現(xiàn)了其發(fā)展過程中更加成熟的形象。

Vite 6.0 的主要更新與改進(jìn)

1. resolve.conditions 默認(rèn)值更新

以前，resolve.conditions 的默認(rèn)值是空數(shù)組 []，并由內(nèi)部自動添加某些條件。而在 Vite 6 中，這些條件（如 ['module', 'browser', 'development|production']）不再默認(rèn)添加，開發(fā)者需手動指定。

提供了新的默認(rèn)值 defaultClientConditions 和 defaultServerConditions，如果你使用了自定義條件（例如 ['custom']），需更新為 ['custom', ...defaultClientConditions]。

2. 改進(jìn)的 JSON 處理

Vite 6 在開啟 json.stringify: true 的同時默認(rèn)保留 json.namedExports，并新增 json.stringify: 'auto'，僅對大型 JSON 文件進(jìn)行序列化。可以顯式設(shè)置 json.namedExports: false 來關(guān)閉命名導(dǎo)出。

3. HTML 的資產(chǎn)處理擴(kuò)展

從原先僅支持 <link href> 和 <img src>，擴(kuò)展到更多 HTML 元素，具體支持列表詳見官方文檔。如果想跳過某些元素的處理，可以添加 vite-ignore 屬性。

4. 默認(rèn)使用現(xiàn)代 Sass API

現(xiàn)代 Sass API 成為默認(rèn)選項(xiàng)，舊版 API 仍可通過 css.preprocessorOptions.sass.api: 'legacy' 使用，但將在下個大版本中移除。遷移細(xì)節(jié)可參考 Sass 文檔。

5. CSS 輸出文件名可自定義

庫模式下，CSS 文件的默認(rèn)輸出名從固定的 style.css 改為根據(jù) package.json 中的 name 生成。需要保留原名稱的項(xiàng)目可以設(shè)置 build.lib.cssFileName: 'style'。

6. 更新 postcss-load-config

升級到 v6 后，TypeScript 配置需使用 tsx 或 jiti，YAML 配置則需加載 yaml 模塊。

7. 實(shí)驗(yàn)性環(huán)境 API

新推出的環(huán)境 API 縮小了開發(fā)和生產(chǎn)環(huán)境的差距，支持開發(fā)者構(gòu)建更貼近生產(chǎn)環(huán)境的工具鏈。這一功能將為 JavaScript 生態(tài)帶來更多創(chuàng)新可能。

適用場景：

• 單頁應(yīng)用（SPA）開發(fā)者：工作流無任何變化，依然高效快捷。
• 自定義 SSR 應(yīng)用開發(fā)者：框架作者和插件維護(hù)者可以利用新 API 簡化開發(fā)流程，同時向后兼容現(xiàn)有的 SSR 配置。
• 插件開發(fā)者：新 API 提供更多控制力，幫助構(gòu)建更強(qiáng)大的插件。

Node.js 兼容性

Vite 6 支持 Node.js 18、20 和 22，不再支持 Node.js 21。未來版本可能對較舊的 Node.js 版本逐步停止支持。

總結(jié)

Vite 6.0 通過引入創(chuàng)新功能和生態(tài)改進(jìn)，鞏固了其在現(xiàn)代前端開發(fā)中的核心地位。從其廣泛的行業(yè)應(yīng)用到對開發(fā)者體驗(yàn)的優(yōu)化，Vite 不僅是一款工具，更是推動 Web 開發(fā)的強(qiáng)大引擎。如果你正在尋找一款高效的前端工具，不妨試試 Vite 6.0，它將助你構(gòu)建更快速、更高質(zhì)量的應(yīng)用。