Vite 2.0 原理解析
為什么要有 Vite？
在瀏覽器支持 ES 模塊之前，開發(fā)者沒有以模塊化的方式開發(fā) JavaScript 的原生機制。這也是 “打包” 這個概念出現(xiàn)的原因：使用工具抓取、處理和鏈接我們的源碼模塊到文件中，使其可以運行在瀏覽器中。
當我們開始構建越來越大型的應用時，需要處理的 JavaScript 代碼量也呈指數級增長。大型項目包含數千個模塊的情況并不少見。我們開始遇到性能瓶頸 —— 使用 JavaScript 開發(fā)的工具通常需要很長時間（甚至是幾分鐘！）才能啟動開發(fā)服務器，即使使用 HMR，文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來。如此循環(huán)往復，遲鈍的反饋會極大地影響開發(fā)者的開發(fā)效率和幸福感。
而 Vite 的出現(xiàn)就是為了解決上述問題。
服務器
Vite 只啟動一臺靜態(tài)頁面的服務器，對文件代碼不打包，服務器會根據客戶端的請求，加載不同的模塊處理，實現(xiàn)真正的按需加載。
HMR 熱更新
Webpack 的熱更新會以當前修改的文件為入口重新 build 打包，所有涉及到的依賴也都會被重新加載一次。
Vite 采用立即編譯當前修改的文件，同時 vite 還會使用緩存機制( http緩存 => vite內置緩存 )，加載更新后的文件內容。
總結
總而言之，Vite 具有快速冷啟動、按需編譯、模塊熱更新的特點。
綜上所述，vite 構建項目與 vue-cli 構建的項目在開發(fā)模式下還是有比較大的區(qū)別：
1、Vite 在開發(fā)模式下不需要打包可以直接運行，使用的是 ES6 的模塊化加載規(guī)則；Vue-CLI 開發(fā)模式下必須對項目打包才可以運行。
2、Vite 基于緩存的熱更新，Vue-CLI 基于 Webpack 的熱更新。
推薦閱讀：
恭喜你又在前端道路上進步了一點點。
點個“在看”和“贊”吧！