Vite 2.0版本發佈，都有哪些新特性

新年還沒過完，Vite就發佈了2.0版本，不得不佩服尤大大。

Vite是什麼

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

• 一個經過本機 ES 模塊提供源文件的開發服務器，具備豐富的內置特性和快得驚人的熱模塊替換(HMR)。
• 一個構建命令，它將代碼與 Rollup 捆綁在一塊兒，後者預先配置爲輸出用於生產的高度優化的靜態資產。

除此以外，Vite 經過其插件 API 和 JavaScript API 具備高度的擴展性，並提供全面的類型支持。

Vite 有多快呢？在 Repl.it 上從零啓動一個基於 Vite 的 React 應用，瀏覽器頁面加載完畢的時候，CRA（create-react-app）甚至尚未裝完依賴。若是你還沒據說過 Vite 究竟是什麼，能夠了解一下項目的設計初衷。

Vite 2.0新特性

相比去年發佈的1.0版本，Vite 2.0算得上上第一個穩定版本，此版本帶來了多處大的改進。

多框架支持

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

全新插件機制和 API

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

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

基於 esbuild 的依賴預打包

因爲 Vite 是一個基於原生 ESM 的開發服務器，在啓動時咱們須要經過依賴預打包來達成兩個目的：1. 減小模塊 / 請求數量；2. 支持 CommonJS 依賴。預打包只有在依賴變更時才須要執行，但在有大量依賴的項目中，每次執行仍是可能會須要很長時間。

Vite 以前是使用 Rollup 來執行這個過程，在 2.0 中咱們切換到了 esbuild，使這個過程加快了幾十倍。冷啓動一個以前須要將近 30 秒預打包的項目如今只須要不到兩秒！從 webpack 或其它打包工具遷移到 Vite 應該也會有相似的速度改善。做爲參考，咱們能夠使用React Meterial項目進行驗證。

更好的 CSS 支持

Vite 將 CSS 視爲module的First-class，並支持如下開箱即用的功能：

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

服務端渲染 (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 1.0 遷移至 Vite 2.0 的說明