这是我参与「第五届青训营 」笔记创作活动的第13天
Vite 的快，主要体现在两个方面: 快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现，完全归功于 Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制。
1.快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载，而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。
2.打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module，所以代码中不可以使⽤CommonJs；
3.热模块更新：在HRM热更新⽅⾯，当某个模块内容改变时，让浏览器去重新请求该模块即可，⽽不是像webpack重新将该模块的所有依赖重新编译；
vite优缺点：vite优点 -unbundle 机制的核心:
模块之间的依赖关系的解析由浏览器实现； 文件的转换由 dev server 的 middlewares 实现并做缓存； 不对源文件做合并捆绑操作； vite缺点：由于 unbundle 机制，首屏期间、懒加载方面需要额外做以下工作:和 Webpack 对比，Vite 把需要在 dev server 启动过程中完成的工作，转移到了 dev server 响应浏览器请求的过程中，不可避免的导致首屏性能下降。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来。
不对源文件做合并捆绑操作，导致大量的 http 请求； dev server 运行期间对源文件做 resolve、load、transform、parse 操作； 预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止。
兼容老浏览器
默认情况下 Vite 只处理语法转译，且默认不包含任何 polyfill。 通过引入polyfill： polyfill 是一个js库，主要抚平不同浏览器之间对js实现的差异。 可以前往 Polyfill.io 查看，这是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务 通过插件支持:通过插件@vitejs/plugin-legacy来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill，兼容版的chunk只会在不支持原生 ESM 的浏览器中进行按需加载
