VitePluginInspect插件

什么是 Vite Plugin Inspect？

vite-plugin-inspect 是 Vite 生态中一个强大的调试工具插件，主要用于可视化展示 Vite 构建过程中的内部状态和配置。它能帮助开发者：

查看 Vite 构建过程中应用的插件顺序和配置
分析模块解析路径和最终打包结果
检查优化后的代码结构和资源引用关系
诊断构建问题，优化构建配置

本质上，该插件通过拦截 Vite 的构建流程，将内部状态以可视化界面或日志形式输出，让开发者能够深入理解 Vite 如何处理项目代码。

核心功能特性

插件可视化：展示所有应用插件的执行顺序和配置参数
模块依赖图：生成模块解析路径和依赖关系的图形化展示
构建过程追踪：记录从源码到最终产物的转换过程
优化结果分析：查看代码压缩、Tree Shaking 等优化后的效果

安装与基本使用

1. 安装插件

pnpmyarnnpm

pnpm add -D vite-plugin-inspect

yarn add -D vite-plugin-inspect

npm install -D vite-plugin-inspect

NOTE

v10.x需要Vite v6.0.1或更高版本。

对于Vite v2到v5，使用vite-plugin-inspect的v0.8.x。如果你想在Vite 6及以下版本中使用它，你仍然可以使用v0.8.x，它是向前兼容的。

通过查看依赖中的packge.json文件我们发现"vitepress": "^1.6.3"使用的vite版本是"vite": "^5.4.14"

所以我们应该安装兼容版本

# 安装兼容版本

npm

npm install -D vite-plugin-inspect@^0.8

2. 在 Vite 配置中启用插件

// vite.config.js
import { defineConfig } from 'vite'
import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [
    // 其他插件...
    inspect() // 无参数时使用默认配置
  ]
})

3. 启动构建并访问调试界面

bash

# 开发环境模式（会启动浏览器界面）
vite --inspect

# 生产环境模式
vite build --inspect

启动后，控制台会输出一个类似 http://localhost:4173/__inspect 的链接，打开即可查看可视化调试界面。

高级配置选项

插件支持通过参数自定义行为，完整配置示例：

import { defineConfig } from 'vite'
import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [
    inspect({
      // 基础配置
      enabled: true, // 是否启用插件，可用于条件开启
      build: true,   // 构建时是否启用
      server: true,  // 开发服务器是否启用
      
      // 路径配置
      outputDir: 'inspect-output', // 输出目录
      filename: 'inspect.html',    // 输出文件名
      
      // 功能选项
      showPluginData: true,       // 显示插件内部数据
      showModuleDependencies: true, // 显示模块依赖
      hideDefaultPlugins: false,  // 隐藏 Vite 默认插件
      
      // 性能优化
      depth: 3, // 依赖图深度，-1 表示无限
      ignore: [/node_modules/], // 忽略的模块匹配模式
      
      // 自定义钩子
      onInspect: (inspectResult) => {
        // 可在此处处理 inspect 结果
        console.log('Inspect completed:', inspectResult)
      }
    })
  ]
})

常用场景与案例

场景 1：检查插件执行顺序

当遇到插件冲突时，可通过 inspect 查看插件顺序：

bash

vite --inspect

在可视化界面中，Plugins 标签页会按执行顺序展示所有插件，帮助定位顺序问题。

场景 2：分析模块解析路径

查看某个模块的解析过程：

bash

vite --inspect --module @/components/Button.vue

在 Modules 标签页中搜索目标模块，查看其解析路径和依赖关系。

场景 3：生产环境构建分析

bash

vite build --inspect

生成的 inspect.html 文件会展示压缩后的代码结构、资源合并情况等，用于优化生产包体积。

场景 4：条件启用调试

在开发环境启用，生产环境禁用：

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import inspect from 'vite-plugin-inspect'

export default defineConfig(({ mode }) => {
  const isDevelopment = mode === 'development'
  
  return {
    plugins: [
      isDevelopment && inspect({
        // 开发环境专属配置
        server: true,
        build: false
      })
    ].filter(Boolean)
  }
})

与其他工具的对比

工具	主要功能	适用场景
vite-plugin-inspect	可视化构建过程与配置	调试 Vite 配置与插件
webpack-bundle-analyzer	分析打包后的文件体积	优化包体积
vscode-js-debug	代码调试	运行时问题定位
source-map-explorer	分析 Source Map 结构	调试 Source Map 相关问题

注意事项

性能影响：插件会增加构建时间，建议仅在调试时启用
版本兼容：确保插件版本与 Vite 版本匹配（查看插件 README）
安全考虑：生产环境默认不启用，如需启用需注意敏感信息暴露
缓存问题：更改配置后建议清除 node_modules/.vite 缓存

通过合理使用 vite-plugin-inspect，开发者可以更深入地理解 Vite 构建流程，快速定位配置问题，优化项目构建效率和输出结果。

VitePluginInspect插件 ​