vite-plugin-import-graph

A Vite plugin that records your project's module import graph in a JSON file.

This plugin only produces the import graph data instead of including a visualization frontend and runs faster than those more integrated tools.

You can use the import graph data according to your needs, such as:

• Visualizing the import graph with tools like D3.js, Graphviz, etc.
• Analyzing the import graph to detect circular dependencies, dead code, etc.
• Pulling all dependencies of certain entry modules recursively to perform test impact analysis, etc.

Usage

1. npm install

npm i -D vite-plugin-import-graph # pnpm add -D vite-plugin-import-graph

2. Add to your vite.config.js or vite.config.ts:

// vite.config.ts
import { defineConfig } from 'vite'
import importGraph from 'vite-plugin-import-graph'

export default defineConfig({
  plugins: [
    importGraph({
      filename: 'import-graph.json',
      absoluteModuleIds: false,
      usePrefix: false,
    })
  ]
})

Options

• filename (default: 'import-graph.json')

  The filename to write the import graph into. Relative paths are resolved from project root.

• absoluteModuleIds (default: false)

  Whether to output module IDs as absolute paths in the import graph. By default, module IDs are relative to project root.

• usePrefix (default: false)

  Whether to add prefixes to virtual modules or npm packages. Currently supported prefixes:

  • npm packages: npm:vue
  • Virtual modules: virtual:vite/modulepreload-polyfill.js

Output

The import graph is written to the specified file in JSON format. The keys are module IDs and the values are arrays of imported module IDs.

{
  "/src/main.ts": [
    "/src/foo.ts",
    "/src/bar.ts"
  ],
  "/src/foo.ts": [
    "/src/bar.ts",
    "lodash"
  ],
  "/src/bar.ts": [],
  "lodash": []
}

Note that paths inside the same npm packages are merged as the package level.

License

MIT License © 2024-Present GU Yiling