源碼共讀我新出了:第40期 | vite 是如何解析用戶配置的 .env 的
鏈接:https://www.yuque.com/ruochuan12/notice/p40
也可以點擊文末閱讀原文查看,歡迎學習記筆記~
12 月 9 日,Vite 4.0 正式發布。下面就來看看 Vite 4.0 有哪些更新吧!
與 Vite 3 相比,這個主版本的的更新范圍更小,主要目標是升級到 Rollup 3。Vite 團隊與生態系統緊密合作,以確保這個新的主要版本順利升級。
Rollup 3
Vite 4.0 使用 Rollup 3,這使我們能夠簡化 Vite 的內部資源處理并有許多改進。
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 快速重新刷新比 Babel 快很多,對于某些項目來說,SWC 現在是一個更好的選擇。從 Vite 4 開始,有兩個插件可用于不同的 React 項目。
(1)@vitejs/plugin-react
@vitejs/plugin-react
是一個使用 esbuild 和 Babel 的插件,以較小的包占用空間和能夠使用 babel transform pipeline 的靈活性實現快速 HMR。
(2)@vitejs/plugin-react-swc (新)
@vitejs/plugin-react-swc
是一個新的插件,在構建過程中使用 esbuild,但在開發過程中將 Babel 替換為 SWC。對于不需要非標準 React 擴展的大型項目,冷啟動和熱更新 (HMR) 會加快。
兼容性
現代瀏覽器構建現在默認以 Safari 14 為目標,以實現更廣泛的 ES2020 兼容性。這意味著現代構建現在可以使用 BigInt,并且不再轉譯空值合并運算符。如果需要支持舊的瀏覽器,可以像往常一樣添加@vitejs/plugin-legacy
。
將 CSS 作為字符串導入
在 Vite 3 中,.css
文件的默認導出可能會引入 CSS 的雙重加載。
import?cssString?from?'./global.css';
這種雙重加載可能會發生,因為會發出.css
文件,并且很可能 css 字符串也會被應用代碼使用。從 Vite 4 開始,.css
默認導出被棄用。在這種情況下,需要使用 ?inline
查詢后綴修飾符,因為它不會發出導入的.css
樣式。
import?stuff?from?'./global.css?inline'
其它功能
預打包依賴項時支持 patch-package;
更簡潔的構建日志輸出并切換到 kB 以與瀏覽器開發工具保持一致;
改進 SSR 期間的錯誤消息。
Vite 4.0 更新詳情:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md
·················?若川簡介?·················
你好,我是若川,畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇,在知乎、掘金收獲超百萬閱讀。從2014年起,每年都會寫一篇年度總結,已經堅持寫了8年,點擊查看年度總結。同時,最近組織了源碼共讀活動,幫助5000+前端人學會看源碼。公眾號愿景:幫助5年內前端人走向前列。
掃碼加我微信 lxchuan12、拉你進源碼共讀群
今日話題
目前建有江西|湖南|湖北?籍 前端群,想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持~