Vite 浅层原理

高级

Vite如此快速的主要原因：

1. child::

   Vite 预构建

   适用范围:

   1. 作用:

   1. 将CommonJS或AMD规范导入的模块都转换为ESM规范, 使浏览器也能正确导入
   2. 提升 “导入npm依赖模块” 的性能
   3. 极大加快服务启动速度

   梗概:

   预构建:

   1. 解析获得项目中所有的npm依赖，然后把这些依赖模块都通过**ESbuild进行预构建**
   2. 缓存依赖构建的结果到磁盘中，下次启动开发服务器的时候就能直接引用
   3. 保存在服务端和浏览器的缓存中, 并重写导入语句

   预构建的发生时间:

   1. 服务器刚刚启动的时候

   1. 前提是服务器运行时带上参数--force(默认带上的)

   2. 缓存中没有某个npm依赖模块的时候

   会重新执行预购键, 并且重新刷新页面

   3. 标志着会有新npm依赖的文件被修改的时候

   以及以下三个文件被修改, 也会重新预构建

   4. 浏览器缓存改变的时候

   1. 刷新页面的时候
   2. 通过开发者工具的Network选项卡的暂停缓存选项

   指向原始笔记的链接

2. child::

   vite 热模块替换

   Vite 内置高效的热模块替换 (HMR) 机制。当代码发生变化时，只重新编译和替换实际改动的模块，而无需重新加载整个页面。HMR 的实现依赖于 [use::ES 模块]，这使得更新更加精准和快速。

   指向原始笔记的链接