Vite 解決了 Webpack 哪些問題

隨着項目的複雜度升級，代碼規範和管理就必需要同步提高。因而，編程社區中提出了多種模塊化規範，服務端選擇了 CommonJS 規範，客戶端選擇 AMD 規範較多，可是，兩種模塊化規範也都存在必定的問題，都是 JS 編程，有兩個不一樣的模塊化規範，在 JS 語言層面仍是不夠的，終於在 ES6 中，ECMA 委員會推出了語言層面模塊系統：ES Modules 規範

模塊化能夠幫助咱們更好地解決複雜應用開發過程當中的代碼組織問題，可是隨着模塊化思想的引入，咱們的前端應用又會產生了一些新的問題，好比：

• 首先，咱們所使用的 ES Modules 模塊系統自己就存在環境兼容問題。儘管現現在主流瀏覽器的最新版本都支持這一特性，可是目前還沒法保證用戶的瀏覽器使用狀況。因此咱們還須要解決兼容問題
• 其次，模塊化的方式劃分出來的模塊文件過多，而前端應用又運行在瀏覽器中，每個文件都須要單獨從服務器請求回來。零散的模塊文件必然會致使瀏覽器的頻繁發送網絡請求，影響應用的工做效率
• 最後，談一下在實現 JS 模塊化的基礎上的發散。隨着應用日益複雜，在前端應用開發過程當中不單單隻有 JavaScript 代碼須要模塊化，HTML 和 CSS 這些資源文件也會面臨須要被模塊化的問題。並且從宏觀角度來看，這些文件也都應該看做前端應用中的一個模塊，只不過這些模塊的種類和用途跟 JavaScript 不一樣

對於開發過程而言，模塊化確定是必要的，因此咱們須要在前面所說的模塊化實現的基礎之上引入更好的方案或者工具，去解決上面提出的 3 個問題，讓咱們的應用在開發階段繼續享受模塊化帶來的優點，又沒必要擔憂模塊化對生產環境所產生的影響

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器（module bundler）

Vue 腳手架工具 vue-cli 使用 webpack 進行打包，開發時能夠啓動本地開發服務器，實時預覽。由於須要對整個項目文件進行打包，開發服務器啓動緩慢

而對於開發時文件修改後的熱更新 HMR 也存在一樣的問題

Webpack 的熱更新會以當前修改的文件爲入口從新 build 打包，全部涉及到的依賴也都會被從新加載一次

Vite 則很好地解決了上面的兩個問題

打包問題

vite 只啓動一臺靜態頁面的服務器，對文件代碼不打包，服務器會根據客戶端的請求加載不一樣的模塊處理，實現真正的按需加載

熱更新問題

vite 採用當即編譯當前修改文件的辦法。同時 vite 還會使用緩存機制( http 緩存 => vite 內置緩存 )，加載更新後的文件內容

因此，vite 具備了快速冷啓動、按需編譯、模塊熱更新等優良特質

綜上所述，vite 構建項目與 vue-cli 構建的項目在開發模式下仍是有比較大的區別：

• Vite 在開發模式下不須要打包能夠直接運行，使用的是 ES6 的模塊化加載規則；Vue-CLI 開發模式下必須對項目打包才能夠運行
• Vite 基於緩存的熱更新，Vue-CLI 基於 Webpack 的熱更新