vite 是 Vue.js 的作者所做的一個新的 bundler ，如果你有用過應該會知道，它最特別的部份是它在開發時不做打包，而是用原生瀏覽器支援的 es6 module 來載入相依性，這個概念其實也不算是最早的，在那之前還有個 snowpack 也是採用不打包的型式，不過這樣的概念應該是跟著 vite 紅起來的

那不打包的作法有什麼好處呢？

• 若要打包的話 webpack 就必須要在一開始走訪所有的檔案來取得相依性，這使得啟動的時間會加長
• hot reload 時也不需要額外的檢查檔案的相依性，讓瀏覽器去處理就行了

不過 vite 在 production build 時還是會做打包，而且用的是 rollup ，因為如果像在開發時不打包，那瀏覽器就必須要發出一個個的 request 來取得各個 js 檔，這樣才知道下一個相依性在哪，才能再取得下一個，而且實際環境的瀏覽器也可能還不支援 module

還有它在開發時也會用 rollup 打包套件的部份，為了加快載入速度，比如像 vue 自身，因為這些套件在開發時通常不會去動到，只要打包一次，之後載入也只要載入一個檔案就行了

安裝與使用

最方便的應該是用 create-vite-app 來建一個 vite 的專案

$ create-vite-app vite-app

預設會建立的是 Vue 的專案，畢竟是 Vue 的作者做的，不過也有其它樣版，像 React ：

$ create-vite-app --template react vite-app

如果要自己安裝的話也是可以的，只要建一個專案並安裝 vite 就行了

$ yarn add --dev vite

它在這部份有點像 Parcel (雖然底下的原因並不是) ，你需要放一個 index.html 在專案的目錄，並用 type="module" 的形式引入你的 js 才行，像：

<script type="module" src="/src/index.js"></script>

vite 啟動後只有開啟它的 server 與找可以預先打包的套件而已，它實際處理程式碼要等到瀏覽器的 request 進來，也就是要求 /src/index.js 時

另外稍微提一下 snowpack ， snowpack 跟 vite 最大的差別應該是 snowpack 其實在 production build 時預設也是不會把程式碼打包的，這部份是 plugin 在做的，而它目前只有 webpack 的 plugin

下一篇是 gulp 這個老牌的 task runner