Vite 概念

• Vite 是一個面向現代瀏覽器的更輕, 更快的 web 應用開發工具
• 它基於 ECMAScript 標準原生模組系統 (ES Modules) 實現
• 它的出現是為了解決 webpack 在開發階段使用 webpack-dev-server 冷啟動時間過長, 另外, webpack-hmr 熱更新反應速度慢的問題
• 使用 Vite 建立的專案就是一個普通的 vue3 的應用, 沒有太多特殊的地方, 相比基於 vue-cli 建立的專案, 也少了很多的配置檔案和依賴,
• Vite 專案依賴
• Vite (命令列工具)
• @vue/compiler-sfc (用來編譯專案中的 .vue檔案, vue2 中使用的是 vue-template-compiler)
• 這裡需要注意的是, Vite 目前只支援 vue3.0的版本, 建立專案的時候通過指定使用不同的模板也可以支援其他的框架

基礎使用

• vite server

在執行 vite serve 的時候, 不需要打包, 直接開啟一個 web 伺服器, 當瀏覽器請求伺服器, 例如請求一個單檔案元件, 這個時候在伺服器端編譯單檔案元件, 然後把編譯的結果返回給瀏覽器, 注意這裡的編譯是在伺服器端, 另外, 模組的處理是在請求到伺服器端處理的

我們再來回顧一下 vue-cli 建立的應用

它在啟動開發的 web 伺服器的時候, 使用的是 vue-cli-service serve, 當執行 vue-cli-service serve 的時候, 它內部會使用 webpack, 首先去打包所有的模組, 如果模組比較多的話, 打包速度會非常的慢, 把打包的結果儲存到記憶體中, 然後才會開啟開發的 web 伺服器, 瀏覽器請求 web 伺服器, 把記憶體中打包的結果直接返回給瀏覽器, 像 webpack 這類工具, 它的做法是將所有的模組提前編譯打包進 bundle 裡, 換句話說, 不管模組是否被執行, 是否使用到, 都要被編譯和打包到 bundle 裡, 隨著專案越來越大, 打包後的 bundle 也越來越大, 打包的速度自然也就越來越慢

Vite 利用現代瀏覽器原生支援的 ES Module 模組化的特性, 省略了對模組的打包, 對於需要編譯的檔案, 例如單檔案元件, 樣式模組等, Vite 採用的另一種模式, 即時編譯, 也就是說, 只有具體去請求某個檔案的時候才會在服務端編譯這個檔案, 所以, 這種即時編譯的好處主要體現在按需編譯速度會更快,

• vite build
• Rollup, 最終還是會把檔案提前編譯並打包到一起
• Dynamic import
• Polyfill

HMR

• Vite HMR
• 立即編譯當前所修改的檔案
• Webpack HMR
• 會自動以這個檔案為入口重寫 build 一次, 所有的涉及到的依賴也都會被載入一遍

打包 or 不打包

• 使用 Webpack 打包的兩個原因
• 瀏覽器環境並不支援模組化
• 隨著現在瀏覽器對 ES 標準的逐漸完善, 這個問題已經慢慢不存在了
• 零散的模組檔案會產生大量的 HTTP 請求
• http2 已經解決, 可以複用連線

開箱即用

• TypeScript - 內建支援
• less/sass/stylus/postcss - 內建支援 (需要單獨安裝)
• JSX
• Web Assembly

Vite 特性

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