vite與webpack的區別

記錄一下vite構建工具與webpack的區別

打包原理比較

原理圖示

vite原理簡述

vite的改進點

vite缺點

參考資料

打包原理比較

原理圖示

vite

webpack

vite原理簡述

聲明 script 標簽類型為 module

瀏覽器向服務器發起GET

// 請求main.js文件： http://localhost:3000/src/main.js // /src/main.js: import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

劫持瀏覽器的http請求，在后端進行相應的處理將項目中使用的文件通過簡單的分解與整合，然后再返回給瀏覽器(整個過程沒有對文件進行打包編譯)

vite的改進點

vite缺點

生態不及webpack，加載器、插件不夠豐富

生產環境esbuild構建對于css和代碼分割不夠友好

沒被大規模重度使用，會隱藏一些問題

參考資料

Vite 官方中文文檔(https://cn.vitejs.dev/)

webpack

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。