Vite 是什麼? 為什麼要用 Vite? 它解決了哪些問題? 又是如何解決?

什麼是 Vite?

Vite 是近幾年前端業界熱門的建構工具 (build tool)，它大幅地簡化了前端建構的流程與時間。Vite 的核心功能有幾點：

• 作為開發伺服器 (dev server)：讓開發者可以在本地 (localhost) 進行開發。Vite 的熱模組更新 (hot module replacement) 提供開發者非常好的開發體驗。以開發 React 來說，當有任何的改動後，Vite 的熱模塊更新會以非常快的速度重新渲染本地的頁面，同時會保留當下的任何 state。
• 打包程式碼：Vite 背後是透過 Rollup 進行打包，高度優化部署到生產環境 (production) 的打包結果。

為什麼要用 Vite? 它解決了哪些問題?

Vite 的核心功能跟業界很常使用的 Webpack 很相似，那為什麼要選 Vite 呢? 它解決了哪些過去遇到的問題?

解決開發伺服器過慢

假如有用過 Webpack 在大型專案的開發者，可能會有類似的經驗，就是在改動某部分程式碼後，要等數十秒才能看到畫面渲染新的版本，特別是專案中有用 TypeScript 時，每次的等待時間都讓開發體驗非常的差。類似的問題可能不只在使用 Webpack 的專案出現，其他工具也有 (例如 Vue CLI)。

而 Vite 的出現就是要解決這類問題。Vite 不管在本地專案的冷啟動，或是專案改動時的熱模組更新，速度都非常的快。每次修改後不用等個數十秒才能看到新的畫面。這讓開發者的體驗更好，試想假如做某個專案，每次改動完都要等半分鐘，很可能讓開發者失去耐心。除此之外，這也讓回饋循環 (feedback loop speed) 更加快速，對於專案開發也是助益良多。

生產環境的程式碼打包

除了說能解決開發時的開發伺服器過慢問題，Vite 也透過 Rollup 協助進行生產環境的打包。雖然現在原生的 ES Module 已經獲得廣泛的支持，但如果直接在生產環境使用沒打包的 ES Module 仍是沒效率的。在打包的過程中，透過 tree-shaking、lazy-loading、common chunk splitting 等方式，可以讓打包出的結果能夠獲得優化。