前端工具

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

2022年10月27日

什麼是 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 等方式,可以讓打包出的結果能夠獲得優化。

👇 以下為廣告贊助