sevlte源碼分析

Ⅰ webpack作者評價vite

評價：Vite 是 vue 的作者尤雨溪在開發 vue3.0 的時候開發的一個 基於原生ES-Mole的前端構建工具。其本人在後來對 vue3 的宣傳中對自己的新作品 Vite 贊不絕口，並表示自己 」再也回不去 webpack 了「 。

webpack缺點是緩慢的伺服器啟動

當冷啟動開發伺服器時，基於打包器的方式是在提供服務前去急切地抓取和構建你的整個應用。

vite改進

Vite 通過在一開始將應用中的模塊區分為依賴和源碼兩類，改進了開發伺服器啟動時間。

依賴大多為純JavaScript並在開發時不會變動。一些較大的依賴（例如有上百個模塊的組件庫）處理的代價也很高。依賴也通常會以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模塊中。

Vite 將會使用 esbuild 預構建依賴。Esbuild 使用 Go 編寫，並且比以 JavaScript 編寫的打包器預構建依賴快10-100倍。

源碼通常包含一些並非直接是 JavaScript 的文件，需要轉換（例如 JSX，CSS 或者 Vue/Svelte 組件），時常會被編輯。同時，並不是所有的源碼都需要同時被載入。（例如基於路由拆分的代碼模塊）。

Vite以原生ESM方式服務源碼。這實際上是讓瀏覽器接管了打包程序的部分工作：Vite 只需要在瀏覽器請求源碼時進行轉換並按需提供源碼。根據情景動態導入的代碼，即只在當前屏幕上實際使用時才會被處理。

webpack: 分析依賴=> 編譯打包=> 交給本地伺服器進行渲染。首先分析各個模塊之間的依賴，然後進行打包，在啟動webpack-dev-server，請求伺服器時，直接顯示打包結果。

webpack打包之後存在的問題：隨著模塊的增多，會造成打出的 bundle 體積過大，進而會造成熱更新速度明顯拖慢。

vite: 啟動伺服器=> 請求模塊時按需動態編譯顯示。是先啟動開發伺服器，請求某個模塊時再對該模塊進行實時編譯，因為現代游覽器本身支持ES-Mole，所以會自動向依賴的Mole發出請求。

所以vite就將開發環境下的模塊文件作為瀏覽器的執行文件，而不是像webpack進行打包後交給本地伺服器。

分析了webpack和vite的打包方式後，也就明白了為什麼vite比webpack打包快，因為它在啟動的時候不需要打包，所以不用分析模塊與模塊之間的依賴關系，不用進行編譯。這種方式就類似於我們在使用某個UI框架的時候，可以對其進行按需載入。

熱更新方面，效率更高。當改動了某個模塊的時候，也只用讓瀏覽器重新請求該模塊，不需要像webpack那樣將模塊以及模塊依賴的模塊全部編譯一次。