新舊時代 JS Bundler 的世代交替 - Vite vs. Webpack 的詳細比較
在過去,當我們談論到 JavaScript 前端開發環境時,很難不提到 Webpack
。這款在 2012 年誕生的強大工具,在過去的 10 年內一直是最主流的前端打包工具 。然而,在 2020 年一個名為 Vite
的新興工具迅速崛起,挑戰著 Webpack 的霸主地位。根據 2023 年 State of JavaScript 網站所統計的資料顯示,Vite 僅花了短短三年就成為使用規模第二大的 Build Tools,如果單看 Interest 或 Positivity 指標的話,甚至都穩坐第一名的位置。
持續關注 JS 前端生態圈的讀者一定有感受到,近兩年 Vite 人氣竄升的速度之快,在 Vite 快速竄紅的一段時間裡甚至瀰漫著「Webpack 已死」的氛圍。由於我目前的公司所使用的工具是 Webpack,而我自己開專案練習時則會選擇 Vite,因此我能明白兩者之間易用性的差距,以及為什麼現在的前端開發者越來越偏好使用 Vite。但撇除像是開箱及用、快速的 HMR 等那些 Vite 被廣為人知的優點外,我還是想要知道兩者在更深層次的技術細節上有何不同。這篇文章整理了我對 Vite 與 Webpack 兩者如何提供現代 Bundler 所需具備的功能的理解,並探討它們各自的適用場景和潛在限制。
本篇文章內容整理自 Vite vs. Webpack: A Head-to-Head Comparison 與 Vite 官方網站
何謂 Bundler?
在探討 Vite 與 Webpack 這兩個工具包山包海的的功能之前,我們得先了解這兩個工具在 Web 應用中所代表的角色:Bundler
Bundler 的定義與功能
JavaScript Module Bundler 是一種用於網頁開發的工具,旨在將多個 JavaScript 檔案合併成一個或少數幾個檔案,這個合併檔案稱為 bundle 。這樣的合併過程可以減少網頁應用程式所需的請求數量,從而提升效能和加快載入速度。