定位分析
打包工具：webpack、rollup、parcel、esbuild
作用：可以對程式碼進行壓縮、合併、轉換、分割、打包
衍生：vue-cli、create-react-app、umi 等是基於 webpack 的上層封裝，用於快速建立專案
vite：開發環境依賴 esbuild 進行預構建，生產環境則依賴 rollup 進行打包
差異分析
啟動差異
webpack：webpack 會根據我們配置檔案（webpack.config.js） 中的入口檔案（entry），分析出專案專案所有依賴關係，會將所有檔案編譯一遍，無論模組是否被執行，專案複雜度越增加，啟動時間就越長。然後打包成一個檔案（bundle.js），交給瀏覽器去載入渲染。
bundle.js：是可以被瀏覽器認識的，拿來即可直接執行的 js 檔案。bundle.js 的本質是一個立即執行函式，這個函式的輸入是依賴拓補圖（一個 js 物件），沒有輸出。內部會按照依賴順序，依次以 eval(code) 的形式執行程式碼。
Vite：首先會用 esbuild 進行預構建，將所有模組轉換為 es module，不需要對我們整個專案進行編譯打包，而是在瀏覽器需要載入某個模組時，攔截瀏覽器發出的請求，根據請求進行按需編譯，然後返回給瀏覽器。
es module：使用 import 用於匯入模組， export 用於匯出模組。模組內部的變數和函式預設是私有的，不會汙染全域性作用域，瀏覽器遇到內部的 import 引用時，會自動發起 http 請求，去載入對應的模組。
底層差異
webpack：基於 nodejs 執行的，由於 js 只能單執行緒執行，無法利用多核 CPU 的優勢，當專案越來越大時，構建速度也就越來越慢了。
vite 基於 esbuild：基於 Go 語言，可以充分利用多核 CPU 的優勢，它在構建依賴的速度上比使用 JavaScript 編寫的打包器快 10-100 倍。
vite 基於 http2：可以併發請求，在之前 http1 的時候，瀏覽器對同一個域名的請求，是有併發限制的，一般為 6 個，如果併發請求 6 個以上，就會造成阻塞問題，所以在 http1 的時代，我們要減少打包產物的檔案數量，減少併發請求，來提高專案的載入速度。2015 年以後，http2 出現了且沒有併發限制。這時候，將打包產物分成多個小模組，並行去載入。vite 也充分利用了這一優勢，對專案資源進行了合理的拆分，訪問專案時，同時載入多個模組，來提升專案訪問速度。
熱更新效率
webpack 專案中，每次修改檔案，都會對整個專案重新進行打包，雖然 webpack 現在有了快取機制，但還是無法從根本上解決這個問題。
vite vite 專案中，監聽到檔案變更後，會用 websocket 通知瀏覽器，重新發起新的請求，只對該模組進行重新編譯，然後進行替換。 並且基於 es module 的特性，vite 利用瀏覽器的快取策略，並且做了協商快取處理，針對依賴模組（第三方庫）做了強快取處理，所以熱更新效率高。
打包差異
Rollup 是一款 ES Module 打包器相比於 Webpack，Rollup 要小巧的多，打包生成的檔案更小更快。vite 正是基於 es module 的特性實現的，所以使用 rollup 要更合適一些。
vite 為什麼不用 esbuild 打包
Vite 目前的外掛 API 與使用 esbuild 作為打包器並不相容，rollup 外掛 api 與基礎建設更加完善，生產環境 vite 使用 rollup 打包會更穩定一些。 如果後面 esbuild 基礎建設與生態更加完善後，esbuild 還是更有優勢的。 所以使用 vite 可能會帶來開發環境與生產環境打包結果不一致的問題。
使用差異
webpack：使用 webpack 自己去搭建專案腳手架時，需要配置比較多的東西， 比如：跨域、程式碼壓縮、程式碼分割、css 前處理器的程式碼轉換、樣式相容性、vue/react 程式碼解析、圖片壓縮、程式碼熱更新、es 降級、ts 轉換等等，我們需要了解各種 loader、plugin 的使用，並且需要根據專案場景，對配置不斷進行最佳化 所以就出現了一些基於 webpack 上層封裝的腳手架，如：vue-cli、create-react-app、umi 等。
vite vite 對我們常用功能都做了內建，比如：css 前處理器、html 前處理器、hash 命名、非同步載入、分包、壓縮、HMR 等等，我們可以很輕鬆的透過配置項去配置
Webpack 的 loader 和 plugin 已經非常成熟，社群較為豐富，但是，Vite 的生態還相對落後，但正在逐漸發展。