Vite 介紹

Vite 概念

• Vite 是一個面向現代化瀏覽器的一個更輕、更快的 web 應用應用開發工具
• 它基於 ECMAScript 標準原生模組系統（ES Module）實現的

它的出現是為了解決 Webpack 在開發階段，使用 webpack-dev-server 冷啟動時間過長和 Webpack MHR 熱更新反應慢的問題。

使用 Vite 建立的專案，預設就是一個普通的 Vue3應用，相比於 Vue CLI 建立的專案，會少了很多檔案和依賴。

Vite 專案依賴

Vite 建立的預設專案，開發依賴很少也很簡單，只包含了：

• Vite
• @vue/compiler-sfc（用來編譯.vue 結尾的單檔案檔案）

需要注意的是，Vite 目前建立的 Vue 專案只支援 3.0 的版本。在建立專案的時候，通過指定不同的模板，也可以建立其他框架的專案。

Vite 提供的命令

• vite serve

  工作原理

  用於啟動一個開發的 web 伺服器，在啟動伺服器的時候不需要編譯所有的模組啟動速度非常的快。

  我們來看看下面這張圖：

  

  在執行 vite serve 的時候，不需要打包，直接開啟了一個 web 伺服器。當瀏覽器請求伺服器時，例如是一個 css，或者是一個單檔案元件，這個時候在伺服器會把這個瀏覽器請求的檔案先編譯，然後直接把編譯後的結果返回給瀏覽器。

  這裡的編譯是在伺服器端，並且，模組的處理是在請求到伺服器端處理的。

  我們來回顧一下，Vue CLI 建立的應用

  

  Vue CLI 建立的專案啟動 web 伺服器用的是 vue-cli-service，當執行它的時候，它內部會使用 Webpack 去打包所有的模組（如果模組很多的情況下，編譯的速度會很慢），打包完成後會將編譯好的模組儲存到記憶體中，然後啟動一個 web 伺服器，瀏覽器請求 web 伺服器，最後才會從記憶體中把編譯好的內容，返回到瀏覽器。

  像 Webpack 這樣的工具，它的做法是將所有的模組提前都編譯打包進記憶體裡，不管模組是否被執行是否被呼叫，它會都打包編譯，隨著專案越來越大，打包後的內容也會越來越大，打包的速度也會越來越慢。

  而 Vite 使用現代化瀏覽器原生支援的 ES Module 模組化的特性，省略了模組的打包環節。對於需要編譯的檔案，例如樣式模組和單檔案元件等，vite 採用了即時編譯，也就是說當載入到這個檔案的時候，才會去服務端編譯好這個檔案。

  所有，這種即時編譯的好處體現在按需編譯，速度會更快。

  HMR

  • Vite HMR

    立即編譯當前所修改的檔案

  • Webpack HMR

    會自動以這個檔案為入口重新編譯一次，所有的涉及到的依賴也會被載入一次

  Vite 預設也支援 HMR 模組熱更新，相對於 Webpack 中的 HMR 效果會更好，因為 Webpack 的 HMR 模組熱跟新會從你修改的檔案開始全部在編譯一遍

• vite build

  • Rollup
  • Dynamic import
    • Polyfill

  Vite 建立的專案使用 Vite build 進行生產模式的打包，這個命令內部使用過的是 Rollup 打包，最終也是把檔案都打包編譯在一起。對於程式碼切割的需求，Vite 內部採用的是原生的動態匯入的方式實現的，所以打包的結果只能支援現代化的瀏覽器（不支援 ie）。不過相對應的 Polyfill 可以解決

是否還需要打包？

隨著 Vite 的出現，我們需要考慮一個問題，是否還必要打包應用。之前我們使用 Webpack 進行打包，會把所有的模組都打包進 bundle.js 中，主要有兩個原因：

• 瀏覽器環境對原生 ES Module 的支援
• 零零散散的模組檔案會產生大量的 HTTP 請求

但是，現在目前大部分的瀏覽器都已經支援了 ES Module。並且我們也可以使用 HTTP2 長連結去解決大量的 HTTP 請求。那是否還需要對應用進行打包，取決於你的團隊和專案應用的執行環境。

個人覺得這以後會是一個趨勢。

開箱即用

• TypeScript - 內建支援
• less/sass/stylus/postcss - 內建支援（需要單獨安裝）
• JSX
• Web Assemby

Vite 的特性

• 快速冷啟動
• 模組熱更新
• 按需編譯
• 開箱即用

未完待續~