https://plumephp.com/tags/%E6%A8%A1%E5%9D%97%E8%A7%A3%E6%9E%90/Recent content in 模块解析 on PlumePHPHugozh-CNTue, 29 Sep 2026 10:00:00 +0800https://plumephp.com/vite-import-graph-internals/Tue, 29 Sep 2026 10:00:00 +0800https://plumephp.com/vite-import-graph-internals/<h2 id="引言">引言</h2> <p>Vite 启动快、按需加载，秘密都藏在**导入图（Import Graph）**里——一个记录「谁导入谁」的图结构，Vite 通过它知道该转换哪些文件、哪些模块是热更新边界、哪些依赖该预打包。本文讲透 Vite 的导入图与模块图内部：先讲导入图是什么（从入口递归展开的依赖映射）、模块节点（id、依赖、被依赖、模块信息）、解析流程（从裸导入 <code>react</code> 到 <code>node_modules/react/...</code> 的文件路径）、依赖追踪（静态分析 import 语句与动态 import）、模块图与转换流水线的协作（转换与依赖收集的关系）、动态导入与图的惰性扩展（为什么首屏只加载用到的）、模块图与 HMR 边界（为什么热更新要沿导入图传播）、图的内存与性能优化、最后是调试模块图的工具与实践（<code>vite debug</code>、插件钩子、可视化）。</p>