Depspy项目代码依赖功能核心讲解

Depspy项目代码依赖功能核心讲解

Posted by XIY on March 2, 2025

项目代码依赖实现功能

实现导出函数级影响面分析

假设我们在a.js有两个导出函数a1 a2,a1b.js引用,a2c.js引用,当更改a1时,影响的文件只会是b.js,而不会影响c.js,这就是函数级影响面分析。

插件参数

entry

指定入口,会从入口处开始分析,默认是index.html

ignores

忽略某些文件,文件路径为 entry + ignore 路径

ignorePlugins

忽略某些插件

commitHash

指定 git commit 的hash 值,默认是当前分支的最新 commit hash

核心概念

导入函数

导入函数分为:

  1. import xx from a,default 导入
  2. import * as xx from a,命名空间导入
  3. import {a1,a2} from a,具名导入

生命周期

初始化

初始化时,会通过打包工具拿取所有文件的导入导出关系,并保存源码路径和绝对路径的映射。

打包时

会收集模块导出使用情况和移除情况,并生产依赖关系图。

依赖关系图初始化时

调用getAllExportEffected方法获取所有被影响的导出

entry 开始,深度优先遍历所有的导入

单个文件遍历

遍历该文件所有使用了的导出函数

如果是vite

调用vite build对该文件的这个导出函数二次打包,获取treeShaking 后的代码,对vue文件单独处理

所有非虚拟模块的依赖都被标记为 external: truemoduleSideEffects: true 表示虽然保留引用,但不解析内容

因而可以通过对比前后文件的差异,判断本地代码是否有改动

如果是webpack

调用 ast 获取treeShaking 后的代码

对比前后文件的差异,判断本地代码是否有改动

之后判断该文件的导入是否有变动,标记变动的导入和对应影响的导出