vite預編譯

❶ 什麼是vite

目前 vue3.0 的版本已經發布了 此次除了可以通過 vue-cli 和 webpack 搭建腳手架外 官方並核還提供了一種新的腳手架搭建工具 vite

Vite 是 Vue 作者開發的一款意圖取代 webpack 的工具

其實現原理是利用 ES6 的 import 會發送請求去載入文件的特性，攔截這些請悶蔽蠢求，做一些預編譯，省去 webpack 冗長的打包時間

安裝螞陪：

使用 vite 創建 Vue3 項目：

根據提示運行項目：

❷ vite和webpack的區別

品牌型號：華為MateBook D15
系統：Windows 11

vite伺服器啟動速度比webpack快，由於vite啟動的時候不需要打包，也就無需分析模塊依賴、悉孫編譯，所以啟動速度非常快。當瀏覽器請求需要的模塊時，再對模塊進行編譯，這種按需動態編譯的模式，極大縮短了編譯時間，當項目越大，文件越多時，vite的開發時優勢越明顯。vite熱更新比webpack快，vite在HRM方面，當某個模塊內容改睜搭鏈變時，讓瀏覽器去重新請求該模塊即可，而不是像webpack重新將該模塊的所有依賴重新編譯。

Vite的使用簡單，只需執行初始化命令，就可以得到一個預設好的開發環境，枝彎開箱即獲得一堆功能，包括：CSS預處理、html預處理、非同步載入、分包、壓縮、HMR等。使用復雜度介於Parcel和Webpack的中間，只是暴露了極少數的配置項和plugin介面，既不會像Parcel一樣配置不靈活，又不會像Webpack一樣需要了解龐大的loader、plugin生態，靈活適中、復雜度適中。

❸ vite和webpack的區別

vite伺服器的啟動速度比webpack快。因為vite啟動時不需要打包，不需要分析模塊依賴關系，不需要編譯，所以啟動速度非虛扒纖常快。當瀏覽器請求所需的模塊時，它會編譯該模塊。這種按需動態編譯模式大大縮短了編譯時間。項目越大，文件越多，vite的開差仿發優勢就越明顯。Vite熱更新比webpack快。在HRM中的vite，當一個模塊的內容發生變化時，只需讓瀏覽器重新請求該模塊，而不需要像webpack一樣重新編譯該模塊的所有依賴關系。

Vite很好用。只需要執行初始化命令此唯，就可以得到一個預置的開發環境。可以得到一堆開箱即用的功能，包括:CSS預處理、html預處理、非同步載入、分包、壓縮、HMR等。使用復雜度介於Parcel和Webpack之間，但只暴露了少數配置項和插件介面。不會像Parcel那樣在配置上不夠靈活，也不會像Webpack那樣需要知道loader和plugin的龐大生態，靈活性和復雜度適中。

❹ vite 是怎麼工作的

👇 下面是我根據自己對 vite 工作方式的理解的極簡總悶塵結，歡迎指正

vite 在開發環境下不需要打包，所以碰坦它很快；當我們啟動我們的項目的時候，vite 會直接啟動一個開發伺服器，載入文件入口文件。
它利用了瀏覽器對原生的 es mole 的支持，攔截瀏覽器的 http 請求，對返回的結果進行螞吵禪編譯，然後返回給瀏覽器渲染

❺ 搭建vue3+typescript+vite+yarn項目

vite是vue3推薦的打包工具，相較於webpack，Vite 是基於 native ES mole —— 現代瀏覽器基本已經全部支持了import/export 語法。 在Vite中,啟動本地伺服器,是不需要提交編譯文件的, 而是在瀏覽器請求對應URL時, 再提供文件,實現了真正的路由懶載入, 這個比起Webpack節省了不少時間。打包和響應速度提升10倍以上

若您的版本低於4.0
請使用 vue upgrade 命令更新cli

我們選中vue，按回車確定

然後選擇vue-ts，回車確認

啟動後在瀏覽器鉛答輸入： http://localhost:3000/
頁面就像這樣槐逗慧：

到這里，一個基礎的vue+ts+vite的項目就搭指顫建好了

下一節我們討論關於vite的配置

❻ webpack作者評價vite

評價：Vite 是 vue 的作者尤雨溪在開發 vue3.0 的時候開發的一個 基於原生ES-Mole的前端構建工具。其本人在後來對 vue3 的宣傳中對自己的新作品 Vite 贊不絕口，並表示自己 」再也回不去 webpack 了「 。

webpack缺點是緩慢的伺服器啟動

當冷啟動開發伺服器時，基於打包器的方式是在提供服務前去急切地抓取和構建你的整個應用。

vite改進

Vite 通過在一開始將應用中的模塊區分為依賴和源碼兩類，改進了開發伺服器啟動時間。

依賴大多為純JavaScript並在開發時不會變動。一些較大的依賴（例如有上百個模塊的組件庫）處理的代價也很高。依賴也通常會以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模塊中。

Vite 將會使用 esbuild 預構建依賴。Esbuild 使用 Go 編寫，並且比以 JavaScript 編寫的打包器預構建依賴快10-100倍。

源碼通常包含一些並非直接是 JavaScript 的文件，需要轉換（例如 JSX，CSS 或者 Vue/Svelte 組件），時常會被編輯。同時，並不是所有的源碼都需要同時被載入。（例如基於路由拆分的代碼模塊）。

Vite以原生ESM方式服務源碼。這實際上是讓瀏覽器接管了打包程序的部分工作：Vite 只需要在瀏覽器請求源碼時進行轉換並按需提供源碼。根據情景動態導入的代碼，即只在當前屏幕上實際使用時才會被處理。

webpack: 分析依賴=> 編譯打包=> 交給本地伺服器進行渲染。首先分析各個模塊之間的依賴，然後進行打包，在啟動webpack-dev-server，請求伺服器時，直接顯示打包結果。

webpack打包之後存在的問題：隨著模塊的增多，會造成打出的 bundle 體積過大，進而會造成熱更新速度明顯拖慢。

vite: 啟動伺服器=> 請求模塊時按需動態編譯顯示。是先啟動開發伺服器，請求某個模塊時再對該模塊進行實時編譯，因為現代游覽器本身支持ES-Mole，所以會自動向依賴的Mole發出請求。

所以vite就將開發環境下的模渣判哪塊文沖游件作為瀏覽器的執行文件，而不是像webpack進行打包後交給本地伺服器。

分析了如碼webpack和vite的打包方式後，也就明白了為什麼vite比webpack打包快，因為它在啟動的時候不需要打包，所以不用分析模塊與模塊之間的依賴關系，不用進行編譯。這種方式就類似於我們在使用某個UI框架的時候，可以對其進行按需載入。

熱更新方面，效率更高。當改動了某個模塊的時候，也只用讓瀏覽器重新請求該模塊，不需要像webpack那樣將模塊以及模塊依賴的模塊全部編譯一次。