两部分组成
1、一部分服务于开发环境：使用ESM+HMR来实现模块的热更新；类似于webpack-server
2、第二部分是一套构建指令，使用rollup来打包代码，并且是预配置的，高度优化静态资源，用于服务于生产环境
打包工具：webpack、rollup(用于打包类库，ant-design等库文件)
存在的问题：
1、缓慢的服务启动
当冷启动服务时，基于打包器的启动方式必须优先抓取并构建整个应用，然后才能启动服务
2、缓慢的更新
基于打包器启动时，重建整个包的效率很低，会随着应用体积增长而直线下降
打包器对比：
image.png
区别在于：esm打包器会按需加载，而传统的打包器，会等待抓取完整个应用后再做反应；
优点：
Vite将模块区分为依赖和源码两类，提升开发服务启动时间
依赖：在开发时不会变动的纯JavaScript，Vite会使用esbuild预构建依赖
源码：通常为JSX、css或者Vue sfc等，时常会被编辑，需要转换，基于路由拆分
Vite 以原生ESM方式提供源码，让浏览器接管打包工作
Vite 同时利用http头来加速整个页面的重新加载：源码模块的请求会根据304进行协商缓存，而依赖模块则会通过 Cache-Control:max-age=31536000,immutable进行强缓存，一旦缓存下来它们将不再需要再次请求
网友评论