原本的 Create React App (CRA) 一直是 React 開發者的建構專案首選，讓開發者能夠啟動和建立應用程式。但隨著現代前端工具的進化，Vite 出現了，它提供了一種更快、更直觀的開發體驗。

Vite 是什麼

Vite 是一個前端開發和打包工具，致力在提供快速和高效的開發體驗 Vite在法文的意思是「快速的」

• Vite使用了瀏覽器支援的原生ES模組導入，所以它在開發環境下不需要進行打包，以達到熱更新(HMR)
• 提供熱更新(HMR)，瀏覽器只會針對有改動到的模組進行更新，不會全部重新渲染
• Vite是VUE的創作者開發的，但是它也有提供React來進行使用
• 雖然在開發模式下不需要打包，但它在build的時後是使用Rollup進行生產環境的打包，如果沒有打包，瀏覽器會發出很多的request來取得每個js檔案，來確認他們的相依性，這樣會降低加載的速度; 現代瀏覽器大部分都有支援原生ES模組，但仍然有些舊瀏覽器或特定環境不支援，所以在正式環境還是需要經過打包

Vite 解決了什麼

開發環境速度提升

如果在比較大型的專案改動程式碼後，網頁渲染可能會等待數秒才會顯示更新後的畫面，特別是使用TypeScript需要進行語言轉換時，開發體驗會更佳不好，有良好的回饋感對於開發者來說非常重要 (就像鍵盤(欸)，因為會迅速看到他們的更改影響應用程式，並即時調整，因此Vite減少了不必要的打包，轉而使用瀏覽器原生ES模組來實現快速的熱更新(HMR)

正式環境打包

Vite在build正式環境打包時採用Rollup打包，現在大部分瀏覽器都有支援ES模組，但某些特定環境下可能不支援，而且在正式環境用ES模組打包仍然是沒有效率的。
因此Rollup打包時會涵蓋 tree-shaking、lazy-loading、common chunk splitting 等方式，讓打包出的結果能夠獲得優化

Rollupc涵蓋的這三種方式是什麼意思？

tree-shaking: (搖晃樹！？) 想像有一棵樹上結滿了果實，透過搖晃的方式來讓不好的果實掉下來(淘汰)，只把要繼續留下的果實留在樹上，這就是tree-shaking。
這是 Rollup 的一個核心特色，它可以「搖晃」程式碼，去除那些為使用或不必要的部分，讓最終的打包文件更小

lazy-loading: 當你在吃到飽餐廳時，你只把想要吃的食物裝到盤子上，吃完再去拿其他的，不會把餐廳全部的食物都先拿走。lazy-loading的意思就是這樣，它只會先加載需要的部分(夾要吃的食物)，不是一次性全部加載(全部食物都拿走)。

common chunk splitting：假設跟朋友出去吃飯，菜單上有漢堡跟義大利麵，你們都想要吃，這時候不會每一個人都點一份漢堡跟一份義大利麵，這樣會重複太多吃不完，除非一個人各點一個品項分享。(可是窩想吃兩份)
在common chunk splitting中它會找到程式碼中 「共同」 (食物)的部分，並將它們 「分享」。
這樣就能夠避免重複加載相同的內容，提升網站的效能。

參考文章
Vite官方文件
ExplainThis