打包工具作用
资源合并（http请求多，网页性能差），打包（模块化开发规范多如commanjs，浏览器不能直接运行），压缩，兼容性
vite vs vue-cli(webpack)
- vue 在开发模式下不需要打包可以直接运行，使用的是ES6模块加载机制
- vue-cli下需要对项目进行打包再运行
- vite基于缓存的热更新
- vue-cli基于webpack的热更新
即vite的特点为快速启动，模块热更新，按需编译
运行机制
vue-cli(webpack)
graph TD
entry--> route1--> moudle1--> bundle
route1--> moudle2--> bundle
route1--> moudle3--> bundle
entry--> route2--> moudle3--> bundle
route2--> moudle4--> bundle
entry--> route... --> moudle... --> bundle
bundle--> serverReady --> chrome
运行过程：模块打包成一个bundle，将打包后的东西放到server,到浏览器再从server拿东西
如果改动了一个或者多个文件，将会重新去打包，当然，它不会傻傻的打包全部文件，会根据路由解析路径差异化打包，但是它确实需要重新打包，并替换内存中的bundle，浏览器才能更新。
vite
graph TD
serverReady --> index.html--> main.js--> chrome
main.js--> app.vue--> chrome
app.vue--> components.vue--> chrome
app.vue--> moudle... --> chrome
chrome --> serverReady
vite会先启动一个服务器，浏览器请求的时候，服务器会将我们写的代码编译一下直接返回
- vue文件，编译为纯js返回，告诉浏览器这是js的文件类型
- node_modules文件：根据import重写返回路径，读取node_modules相应文件返回
展望
目前大多数高版本浏览器支持ESmoudle规范，使用ESmoudle规范开发，各种各样的模块就不需要打包就可以运行起来，即生产环境也不需要打包
既然vite不打包，开发时会不会对浏览器产生阻塞，vite的server配置里面可以选择开启http2，解决阻塞问题
