---
# System prepended metadata

title: Why vite so fast?

---

# 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