背景笔者在开发过程中遇到如下场景：PM：请优化竞价场景逻辑，判断是否命中风控再竞价。FE：安排。在开发过程中，往往通过搜索关键词很快找到对应的文件。这次也不例外。在代码仓库中查找时，结果中有多个对应的文件。经过长时间的排查验证，发现部分文件没有被引用，影响了开发效率。有没有办法提高这类问题的开发效率呢？拆解问题的明显原因是项目仓库中存在未引用的文件，干扰了开发者的判断，影响了开发效率。未引用的文件首先是未引用的？深层原因人为原因，在需求迭代过程中，没有及时剔除或标记无用文件。至于深层次的原因，不再赘述，因地制宜。接下来主要说一下如何解决表面原因。有没有办法找回仓库中无用的文件，并妥善删除？分析整理?构建工具：webpack?技术栈：vue、react?基于这些，可以划定解决方向：基于webpack搭建的vue或react项目。webpack官网有这么一段话：本质上，webpack是现代JavaScript应用的静态模块打包工具。当webpack处理一个应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中需要的每个模块组合成一个或多个bundle，所有这些都是展示你的内容的静态资源。这段话提到了依赖图，这也是解决问题的一个突破口。大致如下图所示：Idea?总体思路如上图所示，接下来我们将围绕三个方向进行详细讨论。如何获取所有文件如何获取依赖文件如何获取无用文件设计思路如何获取所有文件〃什么是所有文件？指的是可以覆盖webpack构建时间的依赖文件的集合。通俗地说，【AllFiles】中的文件数必须大于等于【DependentFiles】中的文件数。使用webpack构建时，需要指定入口文件的位置。比如vue的项目一般是[src/main.js]，大部分依赖文件都会放在[src/**]文件夹下。基于这种思路，参考vue和react的项目目录结构，需要设计【所有文件】的获取入口位置。默认为src，可以通过配置参数传入。读取文件的实现可以使用节点功能。通过node递归读取指定入口目录下的所有文件。node是如何读取文件来获取依赖文件的？介绍中有一句话：webpack提供了多种接口来自定义编译过程。而webpack是基于依赖分析的构建方式。结合这些，就可以在编译过程中得到当前的依赖文件。获取并不复杂。webpack的插件接口允许用户直接干预编译过程。它只需要开发一个自定义插件并在适当的编译阶段执行它。目标是获取依赖文件的集合，这样你就可以在webpack编译并即将退出时做一些事情。检查插件相关的钩子，并确保使用编译器钩子下的完成钩子。donehook：编译完成时执行。如何获取依赖文件如何获取无用文件至此，获取了两条数据：【所有文件】和【依赖文件】。那么无用文件就很简单了，只要把所有文件中的依赖文件都去掉，剩下的就是无用文件了~planreview通过上面的流程，已经可以满足目前的需求了。但在反复测试验证的过程中，发现了一些不足并进行了优化。例如：支持文件记录日志的输出和执行支持自动删除无用文件支持分析以指定类型结尾的文件支持忽略不需要分析的文件夹/article-dependencyAnalysisPlugin.js
