vue.js - Vue项目检测未使用组件的最佳工具有哪些？

Question

想统计下vue项目中有哪些组件从来没被使用过
有没有工具可以检测？
即使被import了，但是模板中没有调用的，也不算被使用过

一个个去搜肯定行不通，组件太多了，有没有工具一键检测的？

Answer 1

有肯定是有的，但是不好处理，因为有一些是动态引入的组件，比如说以下这种动态路由表的情况：

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

只要出现了，就有可能会引用任意组件，所以没办法去很好的排查。

Answer 2

react项目里用过unimported，会列出没使用的文件

Answer 3

以下是检测 Vue 项目中未使用组件的最佳工具和方法，按推荐优先级排序：

---

1. ESLint + vue/no-unused-components 规则

原理：静态分析模板和脚本，检测已注册但未在模板中使用的组件。
操作步骤：

1. 安装依赖：

   npm install eslint eslint-plugin-vue --save-dev

2. 在 .eslintrc.js 中启用规则：

   module.exports = {
     plugins: ['vue'],
     rules: {
       'vue/no-unused-components': 'error', // 严格模式
     }
   };

3. 运行检查：

   npx eslint . --ext .vue,.js

   优点：精准定位未使用的组件，集成到开发流程。
   缺点：需配置 ESLint，不检测动态组件（如 :is="componentName"）。

---

2. Volar (Vue 官方 VSCode 插件)

原理：IDE 实时分析组件使用情况。
操作：

1. VSCode 安装 Volar 插件。
2. 打开 .vue 文件，未使用的组件会显示灰色提示（如下图）：
   
   优点：零配置，开发时实时反馈。
   缺点：仅限 VSCode，需手动检查每个文件。

---

3. unplugin-vue-components (按需自动导入)

原理：自动导入组件，未被引用的组件不会被打包。
配置（Vite 示例）：

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components({
      dirs: ['src/components'], // 扫描目录
      dts: true, // 生成类型声明
    }),
  ],
}

效果：未使用的组件不会出现在代码中，构建后自动排除。
优点：从根源解决未使用组件问题，优化打包体积。
缺点：需改造项目结构，适合新项目。

---

4. 自定义脚本（辅助方案）

若需快速验证，可用 grep 搜索组件名：

# 检查组件是否在模板中被使用
grep -r '<YourComponentName>' ./src --include='*.vue'

适用场景：少量组件快速验证。

---

总结建议

• 首选 ESLint：适合所有项目，长期维护必备。
• 开发期用 Volar：实时可视化提示。
• 新项目用 unplugin-vue-components：彻底杜绝未使用组件。

⚠️ 注意：以上工具均无法 100% 检测动态组件（如通过变量渲染组件），需人工复核。