| 打包原理 | 缺点 | 其他特点 | |
| 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的缓存和压缩 |