# Why vite so fast? ### 為何以往build的時間需要很久? 所謂打包的概念，就是將一個個的模塊透過import、export串起來成為可以在瀏覽器運行的文件，早期的瀏覽器並不支援ES模塊，因此在進行本地除錯的時候會把模組預先打包成瀏覽器可讀的js bundle格式。問題是當專案越大時，專案啟動的時間會越慢! ![](https://i.imgur.com/JqyIEsV.png) 可以從上圖看出原本的打包需要把整個專案建構起來，才可以在瀏覽器運行。 ### vite可以快速的原因 vite一開始會將模塊分成兩部分: 1.==Dependencies== 2.==Source code== Vite only needs to transform and serve source code on demand, as the browser requests it. ![](https://i.imgur.com/vhROfeo.png) ESM的概念是瀏覽器接管了部分打包的工作，在網頁有請求的時候才會去轉換成需要的程式碼 :::info vite只在開發的環境能快速地執行 ::: ### vite執行方式 安裝npm: ```javascript= $ npm init vite@latest ``` 建立模板: ```javascript= $ npm init vite@latest my-vue-app --template vue //除了vue也可以選擇react、svelts ``` ### index.html vite的專案中index.html是在跟目錄而不是在public的資料夾下，其原因為在開發期間vite是一個服務器，而index.html是該vite專案的入口文件 ### 熱更新 透過webSocket來進行更新，也就是只會傳遞有更新的部分給瀏覽器，因此不受專案大小影響速度。 ### vite缺點 還在開階段，不夠成熟，目前僅支持 Vue3