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