繼在五個月前發布 Vite 3 后,現在 Vite 4 正式發布。如今 npm 每周的下載量從 100 萬上升到 250 萬,并繼續保持增長。在今年的 Jamstack Conf 調查中,社區中的使用率從 14% 躍升至 32%,同時保持了 9.7 分的高滿意度。
主要變化
與 Vite 3 相比,這個主要版本的更新幅度較小,主要目的是升級到 Rollup 3。我們已經與 Vite 生態中的各方合作,確保這個新的主要版本有一個平滑的升級路徑。
Rollup 3
Vite 現在使用 Rollup 3,它讓我們簡化了 Vite 的內部資源處理,并有許多改進。點擊這里查看 Rollup 3 更新說明。
框架插件脫離了 Vite core monorepo
@vitejs/plugin-vue 和 @vitejs/plugin-react 從 Vite 的第一個版本開始就是 Vite core monorepo 的一部分。這有助于我們在進行修改時獲得一個緊密的反饋回路,因為我們同時得到了 Core 和插件的測試和發布。借助 Vite-ecosystem-ci,我們可以通過這些在獨立倉庫中開發的插件獲得這種反饋。因此從 Vite 4 開始,它們已經從 Vite core monorepo 中移出。
開發過程中使用 SWC 的新 React 插件
SWC 現在是 Babel 的成熟替代品,特別是在 React 項目的背景下。SWC 的 React Fast Refresh 實現比 Babel 快很多,對于一些項目來說,它現在是一個更好的選擇。從 Vite 4 開始,有兩個插件可用于 React 項目,他們各自都有不同的取舍和權衡。我們認為目前這兩種方法都值得支持,未來我們會繼續探索對這兩個插件的改進。
@vitejs/plugin-react
@vitejs/plugin-react 是一個使用 esbuild 和 Babel 的插件,能夠以占用空間小的軟件包和靈活使用 babel transform pipeline 實現快速的 HMR
@vitejs/plugin-react-swc (新)
@vitejs/plugin-react-swc 是一個新的插件,在構建過程中使用 esbuild,但在開發過程中用 SWC 取代 Babel。對于不需要非標準 React 擴展的大項目,冷啟動和 HMR 的速度會明顯加快。
兼容性
現代瀏覽器構建現在默認以 safari14 為目標,以實現更廣泛的 ES2020 兼容性。這意味著,現代構建現在可以使用 BigInt,并且空值合并運算符(nullish coallessing operator)不再被轉譯。如果你需要支持舊的瀏覽器,你可以像往常一樣添加 @vitejs/plugin-legacy。
以字符串形式導入 CSS
在 Vite 3 中,導入默認導出的 .css 文件可能會帶來 CSS 的重復加載。
import cssString from './global.css';
從 Vite 4 開始,.css 默認導出已被廢棄。在這樣的情況下,需要使用 ?inline 查詢后綴修飾符,因為它不會發出導入的 .css 樣式。
import stuff from './global.css?inline'
其他功能
預捆綁依賴項時支持 patch-package
更加干凈的構建日志輸出,并切換到 kB,以與瀏覽器開發工具保持一致
改進了 SSR 過程中的錯誤信息