• 请不要在回答技术问题时复制粘贴 AI 生成的内容
firhome
V2EX  ›  程序员

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

  •  
  •   firhome · Jul 17, 2019 · 1843 views
    This topic created in 2583 days ago, the information mentioned may be changed or developed.
    比如 vue 项目里,有很多单页是项目遗留 已经没用了。一些资源图片改版也没用了。

    有没有什么工具 可以 找到这些没用到的文件 /组件 /资源呢?
    3 replies    2019-07-17 17:34:51 +08:00
    15651980765
        1
    15651980765  
       Jul 17, 2019
    我只知道 webstorm 删除项目文件的时候,如果该文件在项目中使用到了,会提示你。
    马一下,看有没有大佬解答。
    arrow8899
        2
    arrow8899  
       Jul 17, 2019
    拿到文件名,直接暴力遍历,检查是否包含文件名即可。。。
    duan602728596
        3
    duan602728596  
       Jul 17, 2019 via iPhone
    代码解决思路:

    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 树,提取出其中的路径,然后和所有文件进行比对
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1124 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:29 · PVG 07:29 · LAX 16:29 · JFK 19:29
    ♥ Do have faith in what you're doing.