如何定位Vue2项目中<Sider>这类未知自定义标签的来源库？

问题背景 #

接手的老旧项目基于Vue2开发、无TS支持，引入了多套UI组件库与第三方依赖。代码梳理过程中发现多处使用<Sider>标签，已排查所有显式引入的UI组件库均未提供该组件，无法通过编辑器Cmd+点击跳转溯源，同时确认该组件不属于项目内部编写的自定义组件，需要确定组件的归属来源。
组件使用示例截图：

可落地的排查步骤 #

• 全目录关键字匹配搜索
  在整个项目根目录全局搜索Sider关键字，重点匹配以下代码特征：
  • 全局注册语句：Vue.component('Sider'，这类代码通常存在于项目入口main.js、第三方插件的install方法中
  • 局部注册语句：components: { Sider }，注意排查公共布局文件、全局mixin里的批量组件注册逻辑
  • 覆盖命名变体：同步搜索短横线命名sider、带前缀的变体如LayoutSider/MenuSider，排查别名映射注册的情况
• 梳理Vue.use()引入的第三方依赖
  Vue2的插件可以在调用Vue.use()时自动批量注册全局组件，无需在业务代码中显式写注册语句：
  • 从入口文件开始梳理所有通过Vue.use()挂载的依赖，逐个进入node_modules对应依赖包目录，搜索包内是否存在Sider相关的组件定义、注册代码
  • 重点排查早年的后台管理类模板依赖、布局类插件，这类依赖常内置全局侧边栏组件，随插件初始化自动注册
• 运行时断点直接溯源
  本地启动项目打开对应页面，通过运行时信息直接拿组件来源：
  • 用Vue Devtools选中页面中的<Sider>组件实例，查看实例配置项即可看到组件定义来源
  • 无Devtools时可在浏览器控制台选中Sider对应的DOM节点，通过节点挂载的__vue__属性获取组件实例，开发环境下打印instance.$options.__file即可直接输出组件的原始文件路径
• 排查构建配置的自动注入逻辑
  检查项目的vue.config.js、webpack配置文件：
  • 确认是否配置了webpack.ProvidePlugin做全局组件注入
  • 确认是否使用了自动按需导入类插件（如早年的babel-plugin-import、自动组件注册插件），配置了某目录下组件自动全局注册，刚好目录下存在Sider命名的组件被自动挂载
• 排查自定义渲染逻辑
  检查全局mixin、自定义render函数配置，确认是否存在动态标签映射、组件替换逻辑，将<Sider>标签映射到了其他组件的实现上

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