隨著項目的復雜度升級，代碼規范和管理就必須要同步提升。于是，編程社區中提出了多種模塊化規范，服務端選擇了 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 的熱更新

總結

以上是生活随笔為你收集整理的前端学习(2906):Vite 解决了 Webpack 哪些问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。