作者：Moment
原文：https://juejin.cn/post/7355779183148318747
随着前端项目中使用的依赖包越来越多，而其中一部分依赖包可能并未被项目所使用，手动查找这些依赖包既耗时又繁琐。未使用的依赖包会增加项目的大小，这可能会导致下载和安装你的应用所需的时间更长。并且在构建项目时，构建工具需要处理所有的依赖包。未使用的依赖包可能会不必要地增加构建时间，特别是在大型项目中。
编写脚本来识别未使用的依赖包
Depcheck 是一款用于分析项目中依赖关系的工具，它可以帮助我们找出以下问题：在 package.json 中，每个依赖包如何被使用、哪些依赖包没有用处、哪些依赖包缺失。它是解决前端项目中依赖包清理问题的一个常用工具。
接下来的内容中，我们不是使用这个库，而是自己编写一个脚本来实现我们想要的功能。它主要的步骤被划分为
读取根目录下的 package.json 文件。 递归遍历目录获取所有文件路径，并且跳过 excludeDirs 中指定的目录。 检查依赖是否在文件中被引用，并找到未使用的依赖。 执行检查并报告结果。
最终代码如下所示：
const fs = require("fs");const path = require("path");const projectDir = path.resolve("."); // 当前项目目录const excludeDirs = ["node_modules", ".git"]; // 应该排除的目录// 读取并解析package.jsonfunction readPackageJson() { const packageJsonPath = path.join(projectDir, "package.json"); if (!fs.existsSync(packageJsonPath)) { console.error("package.json not found."); process.exit(1); } return JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));}// 递归遍历目录获取所有文件路径function getAllFiles(dirPath, arrayOfFiles) { const files = fs.readdirSync(dirPath); arrayOfFiles = arrayOfFiles || []; files.forEach(function (file) { if (fs.statSync(dirPath + "/" + file).isDirectory()) { if (!excludeDirs.includes(file)) { arrayOfFiles = getAllFiles(dirPath + "/" + file, arrayOfFiles); } } else { arrayOfFiles.push(path.join(dirPath, "/", file)); } }); return arrayOfFiles;}// 检查依赖是否在文件中被引用，包括动态引用function isDependencyUsed(files, dependency) { const regexStaticImport = new RegExp( `require\\(['"\`]${dependency}['"\`]|from ['"\`]${dependency}['"\`]`, "i" ); const regexDynamicImport = new RegExp( `import\\(['"\`]${dependency}['"\`]\\)`, "i" ); return files.some((file) => { const fileContent = fs.readFileSync(file, "utf8"); return ( regexStaticImport.test(fileContent) || regexDynamicImport.test(fileContent) ); });}function findUnusedDependencies() { const { dependencies } = readPackageJson(); const allFiles = getAllFiles(projectDir); const unusedDependencies = []; Object.keys(dependencies).forEach((dependency) => { if (!isDependencyUsed(allFiles, dependency)) { unusedDependencies.push(dependency); } }); return unusedDependencies;}const unusedDependencies = findUnusedDependencies();if (unusedDependencies.length > 0) { console.log("未使用的依赖:", unusedDependencies.join(", "));} else { console.log("所有依赖都已使用。");}
运行上面的代码我们可以获取到哪些依赖包是没有被使用到的。
在上面的两个正则中，它的作用如下：
require 语句的使用，例如：require('dependency')。 ES6 模块导入语句中 from 后面的部分，例如：import something from 'dependency'。 匹配动态 import()语法的使用，例如：import('dependency')。
这两个正则表达式的目的是为了在文件中找到对指定依赖的引用，无论这些引用是静态的还是动态的。
接下来我们执行一下代码，最终输出结果如下图所示：
这里我们可以查看到哪些内容是没有被使用到的，紧接着，我们可以再添加一行代码进行测试：
你可以看到，当我们添加了一个动态包导入之后，@fastify/static 被从未使用的依赖中移除掉了。
总结
我们可以对我们的项目来进行检测，然后删除一些并没有使用过的包，可以增加项目依赖包的安装速度。
最后分享两个我的两个开源项目,它们分别是:
前端脚手架 create-neat[1] 在线代码协同编辑器[2]
这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗
参考资料
[1]https://github.com/xun082/create-neat: https://github.com/xun082/create-neat
[2]https://github.com/xun082/online-edit: https://github.com/xun082/online-edit
- End -
加我微信，拉你进前端进阶、面试交流群，互相监督学习进步等！
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
关注我的博客 https://github.com/qappleh/Interview，让我们成为长期关系
关注公众号「深圳湾码农」，持续为你推送精选好文，回复「加群」加入面试互助交流群
点一下，代码无 Bug
