Vite（法語單詞，“快” 的意思）是一種新型的前端構建工具。

最初是配合 Vue3.0 一起使用的，後來適配了各種前端專案，目前提供了 Vue、React、Preact 框架模板。

目前來說，Vue 使用的是 vue-cli 腳手架，React 一般使用 create-react-app 腳手架。雖然腳手架工具不一樣，但是內部的打包工具都是 Webpack。

為什麼要開發一個全新的構建工具，是 Webpack 不香了嗎？

Vite 方式構建的專案，和使用 Webpack 構建的專案，有什麼不同？

一個新工具的出現，一定是為了解決現有工具存在的問題的，否則新工具就沒有存在的價值和意義。

Vite 到底解決了 Webpack 哪些問題？

想要搞清楚這個問題，我們需要先搞清楚 webpack 是幹什麼的。

很多人的第一印象肯定是 “打包工具”，那前端為什麼需要打包工具呢？打包工具之前，前端開發有什麼問題？我們真的需要打包工具嗎？

隨著網際網路的發展，前端專案越來越複雜。同時，V8 引擎也讓 JavaScript 這門玩具語言，插上了商業專案開發的翅膀，讓 JS 不再受瀏覽器環境的束縛，開始進軍系統級別開發領域。

而隨著專案的複雜度升級，程式碼規範和管理就必須要同步提升。於是，程式設計社群中提出了多種模組化規範，服務端選擇了 CommonJS 規範，客戶端選擇 AMD 規範較多，但是，兩種模組化規範也都存在一定的問題，都是 JS 程式設計，有兩個不同的模組化規範，在 JS 語言層面還是不夠的。

終於在 ES6 中，ECMA 委員會推出了語言層面模組系統：ES Modules 規範。

我們來一點程式碼，簡單看一下 ES Modules 的語法特性。

模組化可以幫助我們更好地解決複雜應用開發過程中的程式碼組織問題，但是隨著模組化思想的引入，我們的前端應用又會產生了一些新的問題，比如：

首先，我們所使用的 ES Modules 模組系統本身就存在環境相容問題。儘管現如今主流瀏覽器的最新版本都支援這一特性，但是目前還無法保證使用者的瀏覽器使用情況。所以我們還需要解決相容問題。

其次，模組化的方式劃分出來的模組檔案過多，而前端應用又執行在瀏覽器中，每一個檔案都需要單獨從伺服器請求回來。零散的模組檔案必然會導致瀏覽器的頻繁傳送網路請求，影響應用的工作效率。

最後，談一下在實現 JS 模組化的基礎上的發散。隨著應用日益複雜，在前端應用開發過程中不僅僅只有 JavaScript 程式碼需要模組化，HTML 和 CSS 這些資原始檔也會面臨需要被模組化的問題。而且從宏觀角度來看，這些檔案也都應該看作前端應用中的一個模組，只不過這些模組的種類和用途跟 JavaScript 不同。

對於開發過程而言，模組化肯定是必要的，所以我們需要在前面所說的模組化實現的基礎之上引入更好的方案或者工具，去解決上面提出的 3 個問題，讓我們的應用在開發階段繼續享受模組化帶來的優勢，又不必擔心模組化對生產環境所產生的影響。

相信你已經想到了，這就是 webpack 等一些列打包工具出現的原因。上面的問題，就是這類工具核心要解決的問題。