Webpack项目瘦身之移除无依赖文件

作者在开发过程中，有遇到以下此场景:,PM：请把关于出价场景的逻辑优化下，在出价前进行判断是否命中风控。,FE：安排。,在开发过程中，经常会通过搜索关键词来快速找到对应文件。此次也不例外，当在代码仓库搜索时，结果却有多个对应文件。经过长时间的排查验证发现有些文件是没有被引用的，影响了开发效率。,能不能通过一种方式来提高此类问题的开发效率？,项目仓库存在未引用的文件，干扰开发人员的判断，影响开发效率。,未引用的文件一开始就是未被引用的？, 人为原因，需求迭代过程中，未及时移除或者标记无用文件。, 对于深层原因，不再叙述，因地制宜。, 接下来主要聊聊表面原因如何解决，有没有方法可以将仓库中无用的文件检索出来并适当移除？, 构建工具：webpack, 技术栈：vue、react, 基于这些，可以划定解决的方向：基于webpack​搭建的vue​或者react项目。, webpack官网有这么一段话：, 本质上，webpack​ 是一个用于现代 JavaScript​ 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。, 这段话有提到依赖图，也是解决问题的突破口。大致如下图：,,思路, 整体思路如上图，接下来将围绕三个方向去细聊下。, 所有文件是指什么？, 是指能覆盖webpack​构建时依赖文件的集合。通俗的讲就是[所有文件]​的文件数量一定大于等于[依赖文件]的文件数量。, 使用webpack​构建时是需要指定入口文件的位置。比如vue​的项目通常为[src/main.js]​，同时大多数依赖文件都会放在[src/**]文件夹下。, 基于此思考，参考vue与react​项目目录结构，需要设计[所有文件]​的获取入口位置，默认为src，可通过配置参数传入。, 读取文件的实现可以使用node​能力。通过node递归读取指定入口目录下的所有文件。,,node读取文件, 简介上有这么一句话：webpack 提供了多种接口来自定义编译过程。, 而webpack又是基于依赖分析的构建方式。, 结合这些就可以在编译过程中获取到当前的依赖文件。, 获取并不复杂，webpack的插件接口允许用户直接介入编译过程，只需开发一个自定义插件，在合适的编译阶段执行即可。, 目标是获取依赖文件集合，故可以在webpack​编译完成后，即将退出时搞些事情。查阅plugins​相关钩子，确定使用compiler​钩子下的done钩子。,,获取依赖文件, 截止目前，已经获取到两份数据：[所有文件]与[依赖文件]。, 那么无用文件就很简单，只要将依赖文件从所有文件剔除，剩余的既是无用文件~, 通过上述流程，已经可以满足当前诉求。, 不过在反复测试验证过程中，发现一些不足并进行了优化。比如：, 详细代码可以参考：​​https://s1.zhuanstatic.com/common/u/article-dependencyAnalysisPlugin.js​​,,