随着前端项目规模的不断扩大，多页面应用（MPA）正面临打包构建效率低下的问题。传统的全量打包方式不仅耗时长，还浪费了大量系统资源。本文分享了一种基于依赖图的多页面打包优化方案，通过动态解析依赖关系和变更文件，实现精准构建，显著提升了开发效率。
项目背景
多页面应用的挑战
在多页面应用开发中，每个页面通常对应一个入口文件（如 main.ts 或 main.js），并通过模块化方式引入业务逻辑和组件。当项目规模增加到数十甚至上百个页面时，每次代码变更都重新打包所有入口文件，显然是一种低效的做法，具体表现为：
- 构建时间过长：每次构建浪费时间，阻碍快速迭代。
- 资源浪费：全量构建会占用大量的 CPU 和 I/O 资源。
- 开发体验差：每次迭代新的需求开发要手动记录需要更新的页面，额外增加开发负担，影响开发者的效率和专注度。
因此，针对这些痛点，我们开发了一种基于依赖图的动态打包工具，通过精准识别受影响的入口文件，避免不必要的重复构建。
核心技术解析
1. 获取变更文件
为了只处理有变更的文件，我们通过 Git 的差异化功能提取改动文件列表。使用以下命令获取相对于主分支的变更文件：
git diff origin/master...HEAD --name-only
通过程序过滤无关文件（如 .html 文件）和脚本自身路径，最终得到准确的变更文件列表。这为后续依赖分析提供了初始数据支持。
2. 解析依赖图
什么是依赖图？
依赖图是一种用于描述模块间关系的结构，节点代表文件或模块，边表示模块间的引用关系。通过解析依赖图，可以清楚地知道某个文件被哪些模块引用以及其所依赖的模块。
{
'/Users/didi/project/saas-web/apps/operation/src/views/workOrderDetail/main.ts': {
dependencies: [
'src/views/workOrderDetail/app.vue',
'@repo/qx-components',
...
]
}
}
工具的实现逻辑
- 技术选型：工具采用 acorn 解析 JavaScript/TypeScript 文件的语法树（AST），同时通过 @vue/compiler-sfc 支持 Vue 单文件组件（SFC）。
- 递归解析：从入口文件出发，递归遍历其所有依赖，构建出完整的依赖图。
- 路径处理：工具兼容了路径别名（如 tsconfig.json 中的 paths）和无后缀引用（如 TypeScript 导入的模块可能省略 .ts 扩展名）。
通过这一流程，工具能够精确识别文件的依赖关系，为动态计算受影响的入口文件奠定了基础。
3. 动态计算入口文件
结合变更文件和依赖图，工具能够精准定位受影响的入口文件，具体逻辑如下：
- 直接变更：入口文件本身出现在变更列表中时，直接标记为需要重新打包。
- 间接变更：如果入口文件的某个依赖文件出现在变更列表中，则该入口文件也需要重新打包。
- monorepo 支持：在 monorepo 项目中，通过解析应用的 package.json，工具还可以处理跨子包的依赖关系，确保变更影响的入口文件被正确标记。
通过这种方式，工具实现了从变更文件到入口文件的映射，大幅优化了构建流程。
优化成果
- 全量打包:
- 增量打包:
- 构建时间缩短：构建时间从全量打包的 31.51 秒减少到增量打包的8.88秒(取决于变动设计内容的数量)。
- 资源利用率提高：CPU 和 I/O 的占用大幅下降，构建过程更加高效。
- 开发体验提升： 减少开发者开发时的负担，开发者可以更快速地看到代码变更的构建效果，迭代速度更快。
经验分享
1. 依赖图的灵活性
依赖图不仅可以用于打包优化，还可以应用于代码分析、循环依赖检测等场景。通过合理构建和利用依赖图，可以显著提升项目的可维护性。
2. 差异化文件的重要性
Git 提供了丰富的差异化工具（如 git diff、git status），结合具体的项目需求可以实现高度定制化的流程。在本案例中，git diff 提供了变更文件的基础数据，而通过过滤和加工，我们得到了更加贴合业务逻辑的输入数据。
3. 工具兼容性
现代前端项目通常会涉及多种文件类型和语言特性（如 TypeScript 和 Vue 的 SFC）。因此，工具需要具备良好的兼容性，通过支持多种解析器和路径处理逻辑，确保工具适配项目需求。
总结
基于依赖图的多页面打包工具，通过精准识别受影响的入口文件，实现了从全量打包到增量打包的飞跃。它不仅提升了构建效率，还为大型前端项目的管理和优化提供了新的思路。
未来，我们可以进一步扩展工具功能，例如引入缓存机制和增量编译技术，进一步优化开发流程。同时，依赖图的应用场景也可以继续拓展，例如静态分析、性能优化等，为项目开发带来更多价值。
