模块图与依赖分析

Vite 维护模块图追踪依赖关系，用于热更新和构建分析。

模块图结构

// Vite 模块图
{
  url: '/src/App.vue',
  file: '/project/src/App.vue',
  id: '/project/src/App.vue',
  imports: ['/src/router/index.js', '/src/store/index.js'],
  importers: ['/src/main.js'],
  isHmrBoundary: false
}

依赖追踪

main.js
  → imports: [App.vue, router/index.js]
    → App.vue imports: [components/Button.vue]
      → Button.vue imports: [styles/button.css]

注意：每个模块记录导入者和被导入者，形成双向依赖图。

动态导入处理

// 动态导入
const About = () => import('./views/About.vue')

// 模块图记录
{
  url: '/src/views/About.vue',
  isDynamicImport: true,
  importers: ['/src/main.js']
}

动态导入创建独立 chunk，按需加载。

循环依赖处理

// A.js
import { b } from './B.js'

// B.js
import { a } from './A.js'

// Vite 处理：
// 1. 检测循环依赖
// 2. 使用引用延迟解决
// 3. HMR 时标记边界

HMR 边界计算

修改 Button.vue
  → 查找 importers: [App.vue]
  → App.vue 不是 HMR 边界
  → 继续向上: [main.js]
  → main.js 是 HMR 边界
  → 更新边界内所有模块

模块图 API

// 在插件中访问模块图
export default function myPlugin() {
  return {
    name: 'my-plugin',
    handleHotUpdate({ server, modules }) {
      const moduleGraph = server.moduleGraph

      // 掷取模块
      const module = moduleGraph.getModuleById(id)

      // 获取导入者
      const importers = module.importers
    }
  }
}

依赖关系可视化

// 使用插件可视化依赖
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'deps.html',
      open: true
    })
  ]
})

要点总结

• 模块图追踪双向依赖关系
• 动态导入标记为独立 chunk
• 循环依赖使用延迟引用处理
• HMR 边界基于模块图计算