---

theme: smartblue

前言

  相信大家對 Vite 以及 Webpack 都應該有所瞭解。眾所周知，Vite 是新一代的前端構建工具，Webpack 是一個 JavaScript 應用程序的靜態模塊打包工具。但是兩者有着很大的區別，比如 Vite 比 Webpack 快。如下圖所示：

• 圖一

• 圖二

  圖一是使用 create-react-app 所創建的文件，圖二是使用 pnpm create vite 所創建的文件，從這裏可以很明顯的看出，要快到5到6倍的時間。不僅如此，在啟動服務器時，Vite 比 Webpack 要快到6倍時間。

---

Vite 為什麼比 Webpack 快

兩者的打包過程以及原理

Webpack - Webpack 叫做 bundler ，將所有文件打包成一個文件。 - Webpack 先識別入口文件，啟動服務器後，最後直接給出打包結果。Webpack 做的是分析代碼，轉換代碼，最後形成打包後的代碼。

Vite - Vite 又叫做 no bundler ，顧名思義，就是不用打包，支持 ES moudle 加載。 - Vite 啟動服務器後，會按需加載，當請求哪個模塊時才會對該模塊進行編譯。按需加載的方式，極大的縮減了編譯時間。

 這樣的打包過程使得 Webpack 在啟動服務器的過程中比 Vite 慢很多。

---

實現方式

  Webpack 是基於 Node.js 實現的，而 Vite 是使用 Esbuild 預構建依賴，Esbuild 使用 Go 語言編寫，比以 Node.js 編寫的打包器預構建依賴快 10-100 倍。

---

總結

  從目前的情況看，Vite 是目前最快捷的工具，但是在如此競爭下相信 Webpack 也會做出改變並進行優化。所有的工具都並不是完美的，開發者們只需根據不同的情況選擇不同的開發工具，使得開發變得更加方便即可。

---