Vite 原理

总结

1 .Vite主要遵循的是使用 ESM 的规范来执行代码，现在浏览器基本都支持了 ESM 规范，在开发阶段并不需要将代码打包成es5模块即可在浏览器上运行。
2 .在入口文件出发，遇到import语句，将对应的模块加载到浏览器中即可
3 .ts,jsx等文件的转译工作也借助了esbuild来提升速度。vite内部会启动一个dev server,并接受独立模块的HTTP请求，让浏览器自身去解析和处理模块加载。在访问对应页面的时候，不是加载一个整的bundle.js，而是按照模块去加载
3 .js语法分析使用的包不是babel,acorn,而是es-module-lexer。在性能上提升了20倍
4 .自定义区块处理：通过在模块后面链接?type 的参数来区分不同的区块。然后针对每个区块单独进行处理，根据不同的区块类型，在transform的时候会使用不同的插件进行编译，比如json文件，处理的时候会使用json插件

libateer789

HMR热更新部分

1 .重写地址的时候，记录模块依赖链importMaps。这样后续更新的时候，可以知道哪些文件需要被热更新
2 .代码中可以用import.meta.hot 接口来标记 HMR Boundary
3 .当文件更新的时候，会沿着之前记录下的importMaps 链式结构找到对应的HMR Boundary，在从这里重新加载对应更新的模块

image.png

4 .如果都没有遇到对应的boundary，则会重新刷新整个应用

优化策略

1 .由于vite打包是让浏览器一个个模块去加载，因此很容易出现http请求的瀑布流问题，浏览器一次并发最多6个请求
2 .vite为了解决这个问题，主要采用了3个方案

1 .预打包，确保每个依赖只对应一个请求、文件
2 .代码分割code split,可以借助rollup内置的manualChunks来实现
3 .Etag 304 状态码，让浏览器在重复加载的时候直接用浏览器缓存