Hello，大家好，我是 Sunday。

11月26日，vite 6 官宣發(fā)布，第一時(shí)間我就去看了對應(yīng)的官方文檔。

圖片

看完之后只有一個(gè)感覺，那就是 “失望”。 vite 6 的升級更像是一個(gè)過渡版本，借此來去推出一些 實(shí)驗(yàn)性質(zhì)的功能 以及 發(fā)布一些過期聲明。

從更新內(nèi)容來看，Vite 6 既沒有像 Vite 3 引入的 ESBuild 替代 Terser，也沒有像 Vite 4 強(qiáng)化 SSR 性能那樣的“大刀闊斧”。相反，Vite 6 的重點(diǎn)更像是在為未來的 Vite 7 做鋪墊，通過優(yōu)化現(xiàn)有功能、實(shí)驗(yàn)性新特性和現(xiàn)代化遷移支持，提供了一個(gè)平滑過渡的版本。

不過，過渡版本≠?zèng)]有價(jià)值。今天就讓咱們花上幾分鐘的時(shí)間，來詳細(xì)了解下 vite 6 都帶來了哪些新的內(nèi)容，以及 為何說它是個(gè) “過渡版本”！

vite 6 都帶來了哪些新的內(nèi)容

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

Vite 6 推出了新的實(shí)驗(yàn)性環(huán)境 API，允許開發(fā)者根據(jù)應(yīng)用的生產(chǎn)環(huán)境需求 創(chuàng)建多個(gè)環(huán)境配置。這使得在開發(fā)和構(gòu)建過程中，可以更精確地模擬不同的運(yùn)行環(huán)境，從而提高開發(fā)效率和代碼質(zhì)量。

對開發(fā)者的影響：對于使用單一客戶端環(huán)境的 SPA 應(yīng)用，現(xiàn)有配置無需更改。但對于需要多環(huán)境支持的應(yīng)用，新的環(huán)境 API 提供了更大的靈活性，開發(fā)者可以根據(jù)需要定義和配置不同的環(huán)境。

2. 默認(rèn)解析條件的更新

在 Vite 5 中，resolve.conditions 的默認(rèn)值為 []，某些條件是內(nèi)部添加的。在 Vite 6 中，這些條件不再被內(nèi)部添加，需要在配置中明確指定。例如，resolve.conditions 的默認(rèn)值現(xiàn)在是 ['module', 'browser', 'development|production']。

對開發(fā)者的影響：如果在項(xiàng)目中使用了自定義的解析條件配置，需要檢查并更新配置，以確保包含新的默認(rèn)條件，避免解析問題。

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

Vite 6 對 JSON 文件的處理進(jìn)行了調(diào)整。即使設(shè)置了 json.stringify: true，json.namedExports 也不會(huì)被禁用。此外，json.stringify 引入了新的默認(rèn)值 'auto'，僅對大型 JSON 文件進(jìn)行字符串化處理。

對開發(fā)者的影響：開發(fā)者需要根據(jù)項(xiàng)目需求，檢查并調(diào)整 JSON 相關(guān)配置，以確保 JSON 文件的處理符合預(yù)期。

4. 擴(kuò)展對 HTML 元素中資源引用的支持

Vite 6 擴(kuò)展了對更多 HTML 元素中資源引用的支持。現(xiàn)在，更多的 HTML 元素可以引用由 Vite 處理和打包的資源。要在某些元素上選擇不進(jìn)行 HTML 處理，可以在元素上添加 vite-ignore 屬性。

對開發(fā)者的影響：這使得開發(fā)者在處理 HTML 模板時(shí)有了更大的靈活性，可以更方便地管理資源引用。

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

在 Vite 5 中，Sass 默認(rèn)使用傳統(tǒng) API。從 Vite 6 開始，Sass 默認(rèn)使用現(xiàn)代 API。如果需要繼續(xù)使用傳統(tǒng) API，可以在配置中設(shè)置 css.preprocessorOptions.sass.api: 'legacy'。

對開發(fā)者的影響：建議開發(fā)者遷移到現(xiàn)代 API，以利用其性能和功能優(yōu)勢。需要注意的是，傳統(tǒng) API 支持將在 Vite 7 中移除。

6. 在庫模式下自定義 CSS 輸出文件名

在 Vite 5 中，庫模式下的 CSS 輸出文件名始終是 style.css，無法通過配置輕松更改。從 Vite 6 開始，默認(rèn)文件名將使用 package.json 中的 "name"，與 JS 輸出文件類似。如果需要明確設(shè)置不同的 CSS 文件名，可以使用新的 build.lib.cssFileName 進(jìn)行配置。

對開發(fā)者的影響：開發(fā)者可以更靈活地管理庫模式下的 CSS 輸出文件名，滿足不同項(xiàng)目的需求。

7. 其他改進(jìn)和修復(fù)

Vite 6 還包含其他改進(jìn)和修復(fù)，例如：

• build.cssMinify 在 SSR 中默認(rèn)為 'esbuild'。
• server.proxy[path].bypass 現(xiàn)在用于 WebSocket 升級請求。
• build.minify: 'terser' 所支持的最小 terser 版本從 5.4.0 提升至 5.16.0。
• commonjsOptions.strictRequires 現(xiàn)在默認(rèn)為 true。

對開發(fā)者的影響：這些改進(jìn)和修復(fù)提升了 Vite 的穩(wěn)定性和性能，開發(fā)者應(yīng)查看更新日志，了解可能影響項(xiàng)目的更改。

為何說它是個(gè) “過渡版本”？

不知道大家看完更新內(nèi)容之后是什么感受。在我的【主觀】看來，整個(gè) vite 6 的更新并沒有涉及到什么核心的變化。

Vite 6 的 實(shí)驗(yàn)性環(huán)境 API 和 擴(kuò)展 HTML 元素支持 等功能，雖然提供了新的可能性，但尚未完全穩(wěn)定。

例如：實(shí)驗(yàn)性環(huán)境 API 仍需要開發(fā)者小心測試，而 HTML 元素?cái)U(kuò)展的適用場景可能在實(shí)際應(yīng)用中仍需驗(yàn)證。這些改進(jìn)在為未來鋪路，但當(dāng)前版本的開發(fā)者可能更多是在 “試水”。

相比 Vite 4 和 Vite 5，Vite 6 沒有帶來革命性的改進(jìn)。

比如： Vite 4 的模塊熱替換（HMR）性能提升和 Vite 5 的 SSR 支持完善。

因此，我說 vite 6 更像是一個(gè)過渡版本。

如果你的項(xiàng)目對性能和現(xiàn)代特性要求較高（如復(fù)雜的多環(huán)境支持、使用現(xiàn)代 Sass API），那么可以嘗試升級 vite 6。但是，如果你沒有這方面需求的話，那么 vite 6 對你的意義可能并不是很大！