本文详解如何在前端多应用架构中，通过依赖图（Dependency Graph）实现脚本的可控、有序、按需加载，替代无效的 fetchpriority 属性方案，确保关键应用优先初始化。
本文详解如何在前端多应用架构中，通过依赖图（dependency graph）实现脚本的可控、有序、按需加载，替代无效的 `fetchpriority` 属性方案，确保关键应用优先初始化。
在优化多前端应用共存的网站时，简单地动态插入 <script></script> 标签并期望通过 fetchpriority="high" 控制加载优先级是不可行的——fetchpriority 仅对 <img> 和 <link rel="image"> 等资源有效，原生 <script></script> 元素根本不支持该属性。浏览器会静默忽略该设置（如你所见，DOM 中未渲染该属性），且无任何兼容性保障。
因此，真正可靠的方案是基于 Promise 的依赖驱动加载机制：将脚本视为有向无环图（DAG）中的节点，显式声明依赖关系，并利用 Promise.all() 保证执行顺序。
✅ 正确实现：构建可排序的依赖图
首先，定义脚本元数据结构，明确每个脚本的源地址、前置依赖及加载状态：
const scriptGraph = {
'app-critical.js': { dependencies: [], promise: null },
'utils.js': { dependencies: [], promise: null },
'app-secondary.js': { dependencies: ['utils.js'], promise: null },
'app-tertiary.js': { dependencies: ['app-critical.js', 'utils.js'], promise: null }
};
⚠️ 注意：必须确保依赖图无环（acyclic），否则
Promise.all()将陷入死锁。建议在构建阶段加入拓扑排序校验（例如使用 toposort 库）。
✅ 加载器核心：递归解析依赖链
封装一个幂等、可复用的加载函数，自动缓存已加载脚本的 Promise，避免重复请求：
const loadedPromises = new Map();
function loadScript(src) {
if (loadedPromises.has(src)) return loadedPromises.get(src);
const promise = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true; // 必须设为 async，避免阻塞 HTML 解析
script.onload = () => resolve();
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
loadedPromises.set(src, promise);
return promise;
}
// 按依赖顺序批量加载
async function loadScriptsInOrder(graph) {
// 提取所有脚本键，并按依赖深度拓扑排序（简化版：确保依赖项总在被依赖项之前）
const sortedKeys = Object.keys(graph).sort((a, b) => {
const depsA = graph[a].dependencies;
const depsB = graph[b].dependencies;
if (depsA.includes(b)) return 1; // b 是 a 的依赖 → b 应先加载
if (depsB.includes(a)) return -1;
return 0;
});
// 逐个初始化 Promise（非立即执行，仅构造）
for (const key of sortedKeys) {
const { dependencies } = graph[key];
if (!graph[key].promise) {
graph[key].promise = dependencies.length === 0
? loadScript(key)
: Promise.all(dependencies.map(dep => graph[dep].promise)).then(() => loadScript(key));
}
}
// 返回所有脚本加载完成的统一 Promise
return Promise.all(sortedKeys.map(key => graph[key].promise));
}
✅ 使用示例：启动关键应用优先流程
// 启动加载，关键脚本 app-critical.js 将最先发起网络请求
loadScriptsInOrder(scriptGraph)
.then(() => console.log('✅ All apps loaded in correct order'))
.catch(err => console.error('❌ Load failed:', err));
// 后续可安全调用已加载模块的导出函数
// e.g., window.CriticalApp?.init?.();
? 关键要点总结
- ❌ 不要尝试给
<script></script>设置fetchpriority—— 它不是标准属性，无效且不可靠； - ✅ 用 依赖图 + Promise 链 实现逻辑优先级，比网络优先级更可控、更语义化；
- ✅ 利用
Map缓存 Promise，天然支持幂等加载与并发复用； - ✅
async=true是必须项，确保不阻塞主文档解析；若需同步执行上下文（如全局变量注入），应改用document.write（不推荐）或模块化import()动态导入； - ✅ 生产环境建议配合
integrity和crossorigin属性增强安全性与缓存策略。
该方案已在微前端（qiankun、Module Federation）及大型 SPA 架构中广泛验证，兼顾性能、可维护性与跨浏览器一致性。
