vite
- 是一种新型前端构建工具，能够显著提升前端开发体验。
- vite 由两部分组成
- 一个开发服务，（基于原生ES模块提供了丰富的内置功，服务于开发环境，类似于webpack的devServe）服务于开发环境，ESM + HMR(实现模块的热更新)
- 一套构建指令，服务于生产环境，用Rollup打包（预配置，可输出用于生产环境）
- 类似于webpack+cli,即提供了打包功能又提供了一些本地启动开发服务的功能，同时还提供了类似Rollup生产环境打包的功能。是一个比较集成化的工具。不与任何框架绑定（vue提供了完善的API；react是一个偏向函数式的理念，页面完全由数据驱动。）
打包的概念
使用工具、处理并将我们的源码模块串联成可以在浏览器中运行的文件
- 常用前端打包工具
- webpack 开发环境启动devServe来做接口的代理，本地mock数据的构建，本地服务代理；生产环境打包成umd格式的入口文件
- rollup 多打包类库
- parcel 比较少用
- gulp 类似于前端的串联工具，类库中串联流程
- 问题
- 缓慢的服务启动
- 当冷启动开发服务器时，基于打包器的方式启动必须优先于抓取并构建你的整个应用，然后才能提供服务
- 缓慢的更新
- 基于打包器启动时，重建整个包的效率很低。原因显而易见：因为这样更新速度会随着应用体积增长而直线下降
- 缓慢的服务启动
vite打包原理
- vite 将模块区分为依赖和源码两类，提升开发服务启动时间
- 依赖：在开发时不会变动的纯JavaScript,Vite会使用esbuild预构建依赖(用go编写的)
- 源码：通常为jsx、css或者vue Sfc等，时常会被编辑，需要转换，基于路由拆分
- vite 以原生ESM 方式提供源码，让浏览器接管打包工作
- vite只需要在浏览器请求源码时，进行转换并且按需提供源码，然后根据情景动态倒入代码，在当前屏幕实际使用时才会被处理，基于打包器启动时重建的整个包的时候效率比较低，在vite中html其实是在原生的ems上执行的，当编辑一个文件时vite只需要精确的使以边界的模块以及最近的html链失活。同时vit会利用http头加速页面的重新加载。源码模块的请求会根据304这样的请求来进行协商缓存，而依赖模块的请求会通过强缓存。
- vite在生产环境下用Rollup打包的原因
- 尽管原生的ems得到了广泛的支持，但是由于嵌套导入会导致额外的网络往返。在生产环境中发布为打包的EMS效率任然是低下的，并且浏览器支持也不太好，为了在生产环境中获得最佳的性能，最好还是使用Rollup这样的工具进行UMD格式的打包
