构建原理与底层机制专题测试

使用 esbuild 编译速度快

利用浏览器原生 ESM 按需加载

使用缓存避免重复编译

依赖预构建减少模块数

使用多线程并行处理

Go 语言编写，执行效率高

简化的语法解析逻辑

以上都是

模块图构建和依赖分析

代码分割（chunk 分割）

Tree Shaking 删除无用代码

代码压缩和优化

支持更多语法特性

无需打包即可按需加载

更好的兼容性

自动生成 Source Map

浏览器请求入口 HTML

HTML 中 script 标签加载入口 JS

JS 中的 import 触发模块请求

Vite 即时编译返回模块内容

使用 esbuild 预构建转换为 ESM

开发环境直接请求 CJS 文件

缓存预构建结果到 node_modules/.vite

生产构建时 Rollup 自动处理

esbuild 支持更多语法

esbuild 基于 Go 编写，速度极快

esbuild 内置缓存机制

esbuild 支持所有 npm 包格式

缓存存储在 node_modules/.vite 目录

依赖变化时自动重新预构建

可手动删除缓存强制重建

缓存基于 package.json 和 lockfile 判断过期

include 强制预构建指定依赖

exclude 排除预构建的依赖

esbuild 选项传递给预构建 esbuild

force 强制重新预构建

Rollup 速度更快

Rollup 提供更好的代码分割和 CSS 处理

esbuild 不支持生产构建

Rollup 兼容性更好

从入口开始递归分析导入

构建模块间的依赖关系图

分析导出和导入标记 Tree Shaking

根据依赖关系分割 chunk

动态导入创建异步 chunk

manualChunks 配置手动分组

共享依赖提取为公共 chunk

chunk 大小限制

存储模块源代码

记录模块间依赖关系用于 HMR 边界计算

缓存编译结果

追踪模块版本变化

模块 ID（路径）

模块的导入依赖列表

模块的导入者列表

模块的转换结果

查找修改模块的边界模块

确定需要热更新的模块链

判断是否需要完整刷新

缓存已更新的模块状态

入口模块

调用 import.meta.hot.accept 的模块

不依赖其他模块的模块

只导出 CSS 的模块

从修改模块开始向上查找导入者

找到 accept 边界模块停止传播

边界模块执行 accept 回调更新

没找到边界则触发完整页面刷新

更新的模块路径列表

更新模块的新导出内容

更新模块的旧导出内容

更新的 Source Map