戳上方“執(zhí)行上下文”，選擇“置頂公眾號”

關(guān)鍵時刻，第一時間送達！

作者 | 尤雨溪 ? 整理｜執(zhí)行上下文?

本文轉(zhuǎn)載自尤雨溪的知乎專欄

2021年02月19日? Vite 2.0?正式發(fā)布了！

Vite（法語意思是 “快”，發(fā)音為 /vit/，類似 veet）是一種全新的前端構(gòu)建工具。你可以把它理解為一個開箱即用的開發(fā)服務(wù)器 + 打包工具的組合，但是更輕更快。Vite 利用瀏覽器原生的 ES 模塊支持和用編譯到原生的語言開發(fā)的工具（如 esbuild）來提供一個快速且現(xiàn)代的開發(fā)體驗。

Vite 有多快？在 Repl.it 上從零啟動一個基于 Vite 的 React 應(yīng)用，瀏覽器頁面加載完畢的時候，CRA（create-react-app）甚至還沒有裝完依賴。

如果你還沒聽說過 Vite 到底是什么，可以到??這里了解一下項目的設(shè)計初衷。如果你想要了解 Vite 跟其它一些類似的工具有什么區(qū)別，可以參考這里的??對比。

如果你還沒聽說過 Vite 到底是什么，可以了解一下項目的設(shè)計初衷。

https://cn.vitejs.dev/guide/why.html

如果你想要了解 Vite 跟其它一些類似的工具有什么區(qū)別，可以參考下方的對比：

https://cn.vitejs.dev/guide/comparisons.html

2.0 帶來了什么

Vite 1.0 雖然之前進入了 RC 階段，但在發(fā)布之前我們決定進行一次徹底的重構(gòu)來解決一些設(shè)計缺陷。所以 Vite 2.0 其實是 Vite 的第一個穩(wěn)定版本。2.0 帶來了大量的改進：

多框架支持

Vite 一開始主要注重于 Vue 的單文件組件支持，但 2.0 基于之前的經(jīng)驗提供了一個更穩(wěn)定靈活的內(nèi)部架構(gòu)，從而可以完全通過插件機制來支持任意框架。現(xiàn)在 Vite 提供官方的 Vue, React, Preact, Lit Element 項目模版，而 Svelte 社區(qū)也在開發(fā) Vite 整合方案。

全新插件機制和 API

Vite 2.0 受 WMR 的啟發(fā)采用了基于 Rollup 插件 API 的設(shè)計。很多 Rollup 插件可以跟 Vite 直接兼容。插件可以在使用 Rollup 插件鉤子之外使用一些額外的 Vite 特有的 API 來處理一些打包中不存在的需求，比如區(qū)分開發(fā) vs 打包，或是自定義的熱更新處理。

Vite 的 JS API 也得到了大幅改進 - 已經(jīng)有不少用戶在開發(fā)基于 Vite 的上層框架，Nuxt 團隊也已經(jīng)在 Nuxt 3 中驗證了初步整合的可行性。

基于 esbuild 的依賴預(yù)打包

由于 Vite 是一個基于原生 ESM 的開發(fā)服務(wù)器，在啟動時我們需要通過依賴預(yù)打包來達成兩個目的：1. 減少模塊 / 請求數(shù)量；2. 支持 CommonJS 依賴。預(yù)打包只有在依賴變動時才需要執(zhí)行，但在有大量依賴的項目中，每次執(zhí)行還是可能會需要很長時間。Vite 之前是使用 Rollup 來執(zhí)行這個過程，在 2.0 中我們切換到了 esbuild，使這個過程加快了幾十倍。冷啟動一個之前需要將近 30 秒預(yù)打包的項目現(xiàn)在只需要不到兩秒！從 webpack 或其它打包工具遷移到 Vite 應(yīng)該也會有類似的速度改善。

更好的 CSS 支持

Vite 將 CSS 看作模塊系統(tǒng)中的一等公民，并且內(nèi)置了一下支持：

強化路徑解析：CSS 中的 @import 和 url() 路徑都通過 Vite 的路徑解析器來解析，從而支持 alias 和 npm 依賴。
自動 URL 改寫：所有 url() 路徑都會被自動改寫從而確保在開發(fā)和構(gòu)建中都指向正確的文件路徑。
CSS 代碼分割：構(gòu)建時每一個被分割的 JS 文件都會自動生成一個對應(yīng)的 CSS 文件，并且兩個文件會被自動并行按需加載。

服務(wù)端渲染 (SSR) 支持

Vite 2.0 提供實驗性的 SSR 支持。Vite 提供一個靈活的 API 來在 Node.js 中高效率地直接加載 ESM 源碼（并且同樣有精準(zhǔn)的更新而不需要打包）。提供 CommonJS 版本的依賴會在 SSR 時自動被跳過轉(zhuǎn)換直接加載。生產(chǎn)環(huán)境下，服務(wù)器可以和 Vite 完全解耦。基于 Vite SSR 的架構(gòu)也可以很方便的做靜態(tài)預(yù)渲染（SSG)。

舊瀏覽器支持

Vite 默認(rèn)只支持原生支持 ESM 的現(xiàn)代瀏覽器，但可以通過官方的 @vitejs/plugin-legacy 來支持舊瀏覽器。legacy 插件會自動額外生成一個針對舊瀏覽器的包，并且在 html 中插入根據(jù)瀏覽器 ESM 支持來選擇性加載對應(yīng)包的代碼（類似 vue-cli 的 modern mode）。

嘗試一下！

功能很多，但是試一下其實很簡單。只需要一分鐘，用以下命令就可以迅速搭起一個基于 vite 的項目（確保你的 Node.js 版本 >=12）：

npm?init?@vitejs/app

參考來源

英文文檔
https://vitejs.dev/

中文文檔
https://cn.vitejs.dev/

github
https://github.com/vitejs/vite

原文地址：

https://zhuanlan.zhihu.com/p/351147547

Vite 2.0 發(fā)布了