Vite 2.0 發佈了！

Vite 2.0 正式發佈了！javascript

Vite（法語意思是「快」，發音爲 /vit/，相似 veet）是一種全新的前端構建工具。你能夠把它理解爲一個開箱即用的開發服務器 + 打包工具的組合，可是更輕更快。Vite 利用瀏覽器原生的 ES 模塊支持和用編譯到原生的語言開發的工具（如 esbuild）來提供一個快速且現代的開發體驗。html

Vite 有多快？在 Repl.it 上從零啓動一個基於 Vite 的 React 應用，瀏覽器頁面加載完畢的時候，CRA（create-react-app）甚至尚未裝完依賴。前端

若是你還沒據說過 Vite 究竟是什麼，能夠到這裏瞭解一下項目的設計初衷。若是你想要了解 Vite 跟其它一些相似的工具備什麼區別，能夠參考這裏的對比。vue

2.0 帶來了什麼

Vite 1.0 雖然以前進入了 RC 階段，但在發佈以前咱們決定進行一次完全的重構來解決一些設計缺陷。因此 Vite 2.0 實際上是 Vite 的第一個穩定版本。2.0 帶來了大量的改進：java

多框架支持react

Vite 一開始主要注重於 Vue 的單文件組件支持，但 2.0 基於以前的經驗提供了一個更穩定靈活的內部架構，從而能夠徹底經過插件機制來支持任意框架。如今 Vite 提供官方的 Vue, React, Preact, Lit Element 項目模版，而 Svelte 社區也在開發 Vite 整合方案。webpack

全新插件機制和 APIgit

Vite 2.0 受 WMR 的啓發採用了基於 Rollup 插件 API 的設計。不少 Rollup 插件能夠跟 Vite 直接兼容。插件能夠在使用 Rollup 插件鉤子以外使用一些額外的 Vite 特有的 API 來處理一些打包中不存在的需求，好比區分開發 vs 打包，或是自定義的熱更新處理。github

Vite 的 JS API 也獲得了大幅改進 - 已經有很多用戶在開發基於 Vite 的上層框架，Nuxt 團隊也已經在 Nuxt 3 中驗證了初步整合的可行性。web

基於 esbuild 的依賴預打包

因爲 Vite 是一個基於原生 ESM 的開發服務器，在啓動時咱們須要經過依賴預打包來達成兩個目的：1. 減小模塊 / 請求數量； 2. 支持 CommonJS 依賴。預打包只有在依賴變更時才須要執行，但在有大量依賴的項目中，每次執行仍是可能會須要很長時間。Vite 以前是使用 Rollup 來執行這個過程，在 2.0 中咱們切換到了 esbuild，使這個過程加快了幾十倍。冷啓動一個以前須要將近 30 秒預打包的項目如今只須要不到兩秒！從 webpack 或其它打包工具遷移到 Vite 應該也會有相似的速度改善。

更好的 CSS 支持
Vite 將 CSS 看做模塊系統中的一等公民，而且內置了一下支持：

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

服務端渲染 (SSR) 支持

Vite 2.0 提供實驗性的 SSR 支持。Vite 提供一個靈活的 API 來在 Node.js 中高效率地直接加載 ESM 源碼（而且一樣有精準的更新而不須要打包）。提供 CommonJS 版本的依賴會在 SSR 時自動被跳過轉換直接加載。生產環境下，服務器能夠和 Vite 徹底解耦。基於 Vite SSR 的架構也能夠很方便的作靜態預渲染（SSG)。

舊瀏覽器支持
Vite 默認只支持原生支持 ESM 的現代瀏覽器，但能夠經過官方的 @vitejs/plugin-legacy 來支持舊瀏覽器。legacy 插件會自動額外生成一個針對舊瀏覽器的包，而且在 html 中插入根據瀏覽器 ESM 支持來選擇性加載對應包的代碼（相似 vue-cli 的 modern mode）。
嘗試一下！

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

npm init @vitejs/app
複製代碼

本文已獲做者尤雨溪受權轉載，原文地址：zhuanlan.zhihu.com/p/351147547

PS：Vite標籤也已經上線：juejin.cn/tag/Vite