Vite 2.0 正式發(fā)布！
當(dāng)我們還在為假期余額不足而煩惱時，尤大在做些什么？
網(wǎng)友：
Vite是什么
Vite (法語單詞“ fast”，發(fā)音為/vit/)是一種新型的前端構(gòu)建工具，它可以顯著改善前端的開發(fā)體驗。它由兩個主要部分組成:
一個通過本機 ES 模塊提供源文件的開發(fā)服務(wù)器，具有豐富的內(nèi)置特性和快得驚人的熱模塊替換(HMR)。 一個構(gòu)建命令，它將代碼與 Rollup 捆綁在一起，后者預(yù)先配置為輸出用于生產(chǎn)的高度優(yōu)化的靜態(tài)資產(chǎn)
此外，Vite 通過其插件 API 和 JavaScript API 具有高度的擴展性，并提供全面的類型支持
有多快？
為了了解 Vite 的速度有多快，這里有一個視頻比較了使用 Vite vs. create-React-app (CRA) 應(yīng)用程序的過程:
關(guān)于Vite2
這實際上是 Vite 的第一個穩(wěn)定版本。也就是說，Vite 2.0比之前的版本有了很大的改進
Vite 2.0采用了一個更健壯的內(nèi)部架構(gòu)從頭開始重新設(shè)計。現(xiàn)在它完全與框架無關(guān)，所有特定于框架的支持都委托給了插件。現(xiàn)在有 Vue、 React、 Preact、 Lit Element 和正在進行的 Svelte 的官方模板
New Plugin Format and API
受到 WMR 的啟發(fā)，新的插件系統(tǒng)擴展了 Rollup 的插件界面，并兼容許多 Rollup 插件。插件可以使用 rollup 兼容的鉤子，以及額外的 vite 特定鉤子和屬性來調(diào)整 vite 專用行為(例如區(qū)分 dev 和 build 或 HMR 的自定義處理)
esbuild Powered Dep Pre-Bundling Esbuild
因為 Vite 是一個本地的 ESM dev 服務(wù)器，使用Pre-Bundling以減少瀏覽器請求的數(shù)量并處理 CommonJS 到 ESM 的轉(zhuǎn)換
在之前，Vite 使用 Rollup 完成這項工作，而在2.0中，它現(xiàn)在使用 esbuild，從而使依賴性預(yù)綁定的速度提高了「10-100」倍
作為參考，React Meterial 用戶界面以前需要28秒，現(xiàn)在需要約1.5秒
First-class CSS Support
將 CSS 視為module的First-class，并支持以下開箱即用的功能:
Resolver enhancement 增強了 CSS 中的路徑，以尊重別名和 npm 依賴 URL rebasing 不管文件從哪里導(dǎo)入，路徑都會自動重新設(shè)置 CSS code splitting
Server-Side Rendering (SSR) Support
Vite 提供了 api，以便在開發(fā)過程中有效地在 Node.js 中加載和更新基于 esm 的源代碼(就像服務(wù)器端 HMR 一樣) ，并自動外部化 commonjs 兼容的依賴關(guān)系，以提高開發(fā)和 SSR 構(gòu)建速度。生產(chǎn)服務(wù)器可以與 Vite 完全解耦
Vite SSR 是作為一個低層次的特性提供的，我們期望看到更高層次的框架在引擎蓋下利用它
Opt-in Legacy Browser Support
Vite 的目標是默認支持原生 ESM 的現(xiàn)代瀏覽器，你也可以通過官方的@vitejs/plugin-legacy 選擇支持傳統(tǒng)的瀏覽器
這個插件會自動生成現(xiàn)代/舊版兩個包，并且基于瀏覽器/特征提取，提供正確的包，確保在支持它們的現(xiàn)代瀏覽器中有更高效的代碼
相關(guān)鏈接
https://dev.to/yyx990803/announcing-vite-2-0-2f0a?continueFlag=d9771f14797e87fb674df31c80b86429 https://github.com/vitejs/vite
推薦閱讀