Vue.js项目如何检测跨组件未使用的props、events、组件及导出资源

可集成到流水线的定期自动化方案 #

• 跨组件未使用props、未被监听的$emit事件：
  若项目使用TypeScript，先给所有组件补全defineProps/defineEmits（Vue3）或对应Props/Emits类型声明（Vue2），基于@vue/compiler-sfc编写轻量自定义脚本，批量解析所有SFC文件：遍历所有组件调用节点的传参与事件监听列表，和组件自身定义的props、emits列表做差集，直接输出冗余项。该脚本可直接集成到CI流程，每次提交自动校验。
• 非响应式冗余data数据：
  开启eslint的vue/no-unused-properties规则先筛出完全未被引用的data项，再新增自定义eslint规则：检测已被引用的data项，若未出现在模板插值/指令、watch监听列表、响应式计算变量依赖中，即可标记为非响应式可移除项，支持直接提示开发者转为组件内普通变量，不需要放在data中。
• 全局/局部未使用注册组件：
  使用depcheck工具，配置Vue SFC解析适配规则，可自动检测所有注册后未被模板引用的组件，同时支持排查项目中未使用的npm依赖包。
• js文件未被引用的多余exports：
  安装eslint-plugin-unused-imports插件，开启unused-imports/no-unused-exports规则，即可自动检测所有js/ts/vue文件中未被其他模块引用的导出项。

首次全量清理手动辅助方案 #

如果是首次对数百个组件的项目做全量清理，可以搭配以下操作降低出错概率：

• 清理前先打全量代码快照，按业务模块拆分清理范围，每清理一个模块就跑一次构建校验与核心功能测试，确认无影响再合并代码。
• 对拿不准的props、emits冗余项，用IDE全局搜索功能搜索对应属性/事件名，确认全项目无引用后再删除。
• 对疑似非响应式的data项，可先临时注释后运行项目，确认无报错、功能正常后再做删除或转普通变量处理。

内容的提问来源于stack exchange，提问作者l1b3rty