| 打包原理 | 缺點 | 其他特點 | |
| webpack | 解析各個模塊的依賴關系 使用loader轉換文件，使用plugin注入鈎子，打包合並模塊，最終生成bundle文件，使用express開啟本地服務器， 瀏覽器請求的是bundle文件，也就是打包過后的文件。 | 1.各個模塊之間的依賴關系過於復雜 會導致打包速度很慢 2.使用熱更新時，改動一個模塊，其他有依賴關系的模塊也會重新進行打包 |
|
| vite | 使用koa開啟本地服務器，沒有webpack那樣打包合並的過程，所以啟動服務器很快，@vue/compiler-sfc會對模塊進行編譯 （修改一些引入文件的路徑 css編譯成js字符串）瀏覽器再請求編譯好的模塊。 |
1.項目的開發瀏覽器要支持esmodule 2.不能識別commonjs語法 |
1.使用熱更時，改動一個模塊，僅需讓瀏覽器重新請求該模塊即可 效率更高。 2.需要打包到生產環境時 vite使用的是rollup 3.有利用http2的緩存和壓縮 |