前端项目里没用到的文件/资源 有什么工具能检测出来吗？

[firhome]

比如 vue 项目里，有很多单页是项目遗留 已经没用了。一些资源图片改版也没用了。

有没有什么工具 可以 找到这些没用到的文件 /组件 /资源呢？

[15651980765]

我只知道 webstorm 删除项目文件的时候，如果该文件在项目中使用到了，会提示你。
马一下，看有没有大佬解答。

[arrow8899]

拿到文件名，直接暴力遍历，检查是否包含文件名即可。。。

[duan602728596]

代码解决思路：

1. 使用 glob 拿到项目中所有的文件
2. 将所有的文件解析成绝对路径
3. 使用 @babel/parser 将 js 文件解析成 ast 树
4. 使用 @babel/traverse 提取 ast 树中 import 的相对路径并转换成绝对路径
5. 对比被使用了的文件后，剩下的文件就是没有用到的，或者是入口文件，排除入口
6. 同理，解析 css 文件可以使用 postcss
7. 解析 vue 文件需要使用 vue-template-compiler 和 @vue/component-compiler-utils 提取出 vue 文件中的 css 和 js 代码，然后重复上面的操作

总之，就是利用解析器将代码解析成 ast 树，提取出其中的路径，然后和所有文件进行比对