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 特性
- 快速冷啟動
- 模塊熱更新
- 按需編譯
- 開箱即用
發布於 06-22