Vite 4.0 正式發(fā)布！

大家好，我是 CUGGZ。

12 月 9 日，Vite 4.0 正式發(fā)布。下面就來看看 Vite 4.0 有哪些更新吧！



與 Vite 3 相比，這個(gè)主版本的的更新范圍更小，主要目標(biāo)是升級(jí)到 Rollup 3。Vite 團(tuán)隊(duì)與生態(tài)系統(tǒng)緊密合作，以確保這個(gè)新的主要版本順利升級(jí)。

Rollup 3
Vite 4.0 使用 Rollup 3，這使我們能夠簡(jiǎn)化 Vite 的內(nèi)部資源處理并有許多改進(jìn)。

Vite core monorepo 框架插件
@vitejs/plugin-vue 和 @vitejs/plugin-react 從 Vite 的第一個(gè)版本開始就是 Vite core monorepo 的一部分。這有助于在進(jìn)行更改時(shí)獲得緊密的反饋循環(huán)，因?yàn)橥瑫r(shí)測(cè)試和發(fā)布了 Core 和插件。

借助 vite-ecosystem-ci，可以通過在獨(dú)立倉(cāng)庫(kù)上開發(fā)的這些插件獲得此反饋，因此從 Vite 4 開始，它們已從 Vite core monorepo 中移出。

在開發(fā)過程中使用 SWC 的新 React 插件
SWC 現(xiàn)在是 Babel 的成熟替代品，尤其是在 React 項(xiàng)目中。SWC 的 React 快速重新刷新比 Babel 快很多，對(duì)于某些項(xiàng)目來說，SWC 現(xiàn)在是一個(gè)更好的選擇。從 Vite 4 開始，有兩個(gè)插件可用于不同的 React 項(xiàng)目。

（1）@vitejs/plugin-react
@vitejs/plugin-react 是一個(gè)使用 esbuild 和 Babel 的插件，以較小的包占用空間和能夠使用 babel transform pipeline 的靈活性實(shí)現(xiàn)快速 HMR。

（2）@vitejs/plugin-react-swc (新)
@vitejs/plugin-react-swc 是一個(gè)新的插件，在構(gòu)建過程中使用 esbuild，但在開發(fā)過程中將 Babel 替換為 SWC。對(duì)于不需要非標(biāo)準(zhǔn) React 擴(kuò)展的大型項(xiàng)目，冷啟動(dòng)和熱更新 (HMR) 會(huì)加快。

兼容性
現(xiàn)代瀏覽器構(gòu)建現(xiàn)在默認(rèn)以 Safari 14 為目標(biāo)，以實(shí)現(xiàn)更廣泛的 ES2020 兼容性。這意味著現(xiàn)代構(gòu)建現(xiàn)在可以使用 BigInt，并且不再轉(zhuǎn)譯空值合并運(yùn)算符。如果需要支持舊的瀏覽器，可以像往常一樣添加@vitejs/plugin-legacy。

將 CSS 作為字符串導(dǎo)入
在 Vite 3 中，.css 文件的默認(rèn)導(dǎo)出可能會(huì)引入 CSS 的雙重加載。

import cssString from './global.css';
這種雙重加載可能會(huì)發(fā)生，因?yàn)闀?huì)發(fā)出.css文件，并且很可能 css 字符串也會(huì)被應(yīng)用代碼使用。從 Vite 4 開始，.css默認(rèn)導(dǎo)出被棄用。在這種情況下，需要使用 ?inline 查詢后綴修飾符，因?yàn)樗粫?huì)發(fā)出導(dǎo)入的.css樣式。

import stuff from './global.css?inline'
其它功能
預(yù)打包依賴項(xiàng)時(shí)支持 patch-package；
更簡(jiǎn)潔的構(gòu)建日志輸出并切換到 kB 以與瀏覽器開發(fā)工具保持一致；
改進(jìn) SSR 期間的錯(cuò)誤消息。
Vite 4.0 更新詳情：https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md




作者：CUGGZ


歡迎關(guān)注微信公眾號(hào) ：前端充電寶