Vite為何比Webpack更好？

banq發表於2022-01-18
ViteWeb

Vite 是新一代的 JavaScript 構建工具，它利用瀏覽器中 ES 模組的可用性和編譯為本機捆綁器，為您帶來最新的 JavaScript 技術所能獲得的最佳開發者體驗。
透過使用基於 ESM 的工作流程進行本地開發，Vite 確保您的開發伺服器即使在處理大型 JavaScript 應用程式時也能保持快速。
Vite 還提供了一個合理的生產構建配置，可以處理基於庫的語法，如 JSX、Vue 和 TypeScript。
透過在底層使用 Rollup，Vite 確保為您的生產構建實現效能最佳化技術，如 tree-shaking、延遲載入和常見的塊拆分。
最後，您還可以透過編寫外掛來擴充套件 Vite 功能。
雖然 Webpack 仍然是許多流行應用程式（如 Next.js 和 Create React App）的預設 JavaScript 構建工具，但鑑於開發者社群的積極反饋，Vite 很有可能成為未來最受歡迎的選擇。
 

Webpack構建速度慢 
Webpack是一個基於捆綁器的構建工具，這意味著要為您的應用程式提供服務，它需要抓取、處理和連線應用程式的整個 JavaScript 檔案。這適用於您編寫的依賴項和應用程式程式碼。
這就是為什麼使用 Webpack 構建用於開發的應用程式和啟動開發伺服器可能需要非常長的時間的原因——一些大型應用程式可能需要 10 多分鐘。
然後，當您儲存檔案時，整個 JavaScript 包將由 Webpack 重新構建，這就是為什麼更改可能需要長達 10 秒才能反映在瀏覽器中，即使啟用了 HMR。Webpack 導致的緩慢反饋迴圈給開發大型 JavaScript 應用程式的開發人員帶來了糟糕的開發體驗。
 

Vite的核心理念：非捆綁開發構建
當您開始開發構建時，Vite 將首先將您的 JavaScript 模組分為兩類：依賴模組和應用程式模組。
瀏覽器中 ES 模組的可用性允許您在瀏覽器上執行 JavaScript 應用程式，而無需將它們捆綁在一起。Vite 的核心思想很簡單：當瀏覽器請求它時，使用 ES 模組轉換並提供一段應用程式程式碼。

  • 依賴項模組

是您從node_modules資料夾中匯入的JavaScript 模組。這些模組將使用esbuild進行處理和捆綁，esbuild是一個用 Go 編寫的 JavaScript 捆綁器，執行速度比 Webpack 快 10-100 倍。
  • 應用程式模組

是您為應用程式編寫的模組，通常涉及特定於庫的擴充套件，如、.jsx或.vue檔案.scss。
 雖然像 Webpack 這樣的基於捆綁器的工作流必須在單個瀏覽器請求之前處理您的整個 JavaScript 模組，但 Vite 只在單個瀏覽器請求之前處理您的依賴模組。
當您的應用程式需要時，您的應用程式模組將由 Vite 轉換和服務：
 

Vite 的捆綁生產版本
雖然現在所有主流瀏覽器都支援原生 ES 模組，但釋出一個捆綁應用程式，它實現了諸如 tree-shaking、延遲載入和通用塊拆分等效能最佳化技術，仍然比非捆綁應用程式帶來更好的整體效能。
出於這個原因，Vite 附帶了一個預先配置的build命令，該命令使用Rollup捆綁您的應用程式。Vite 還為您提供了合理的預設 Rollup 配置，您可以在需要時對其進行自定義。
 

Vite 入門
create-app要開始使用 Vite，您可以使用 Vite 的載入程式立即建立一個預配置的應用程式。該工具支援流行的前端庫，包括 React、Vue 和 Svelte。
這是執行 Vite 引導的應用程式所需的命令：

$ npm init @vitejs/app
# or
$ yarn create @vitejs/app


終端中的提示將指導您建立正確的應用程式。建立應用程式後，您需要執行npm install然後npm run dev啟動開發伺服器。
Vite 支援許多官方模板，包括原生 JavaScript 和 TypeScript。

相關文章