微前端方案在 Vue 3 项目里落地后，子应用加载链路比单体应用复杂得多。主应用先完成自身基础框架初始化，再根据路由匹配发起子应用资源请求，随后执行脚本、创建 Vue 实例、挂载 DOM，最后才可能触发首屏可交互。这个过程中任何一个节点出现波动，都会直接反映为加载耗时增加。如果只记录一个笼统的首屏时间，团队很难判断到底哪个子应用拖慢了整体体验。
要监控子应用加载耗时，首先需要明确统计边界。不同微前端框架对子应用生命周期的定义略有差异，但核心阶段基本一致：资源下载、脚本解析执行、子应用实例创建、挂载完成。监控方案应当覆盖这些阶段，而不是只取 navigationStart 到某个全局事件的差值。否则网络请求被缓存命中、脚本执行耗时增大等情况会被混在一起。
一、子应用加载耗时为什么容易变成一个黑盒
单体 Vue 3 应用的性能分析通常从浏览器 DevTools 的 Network 和 Performance 面板入手，能直接看到 main.js、vendor.js 等资源的耗时。但微前端架构下，子应用资源可能是运行时动态拼接地址，也可能被主应用预加载，甚至由框架内部 fetch 后 eval 执行。这些资源不一定出现在常规的 document 请求列表里，导致开发者用默认工具看不到完整的加载过程。
另外，Vue 3 提供的生命周期钩子例如 onMounted、onBeforeMount 虽然在单个组件内有效，但无法覆盖子应用从脚本下载到 app.mount 完成的完整链路。很多性能问题发生在 Vue 应用创建之前，比如依赖包过大导致的解析时间，或者 qiankun 沙箱初始化时的代理创建开销。如果监控只盯着组件挂载，就会漏掉一大段关键耗时。
因此需要一套轻量的分段打点方案，站在主应用侧采集子应用生命周期与 Performance 资源数据。这种方式不侵入子应用业务代码，对开发团队影响最小，也便于统一汇总。
二、借助 Performance API 完成资源与导航耗时采集
浏览器原生 Performance API 是采集加载数据的可靠基础。通过 performance.getEntriesByType('resource') 可以拿到页面所有已加载资源的 Resource Timing 信息，包括 name、initiatorType、startTime、duration、transferSize 等字段。对于子应用 JS 文件，可以按资源路径过滤，统计出它的真实网络耗时。这里要注意 fetch 方式加载的脚本也会产生 Resource Timing 条目，但 startTime 会受主应用执行时机影响。
如果需要记录从某个标记到另一个标记的时长，可以使用 performance.mark 与 performance.measure。主应用在发起子应用加载前打一个 mark，比如标记名称为 subapp:vue3:start，在子应用挂载完成后打另一个 mark，然后通过 measure 计算差值。这种方案比手动保存 Date.now 更准确，因为 mark 采用的是高精度时间源。
下面是一段基于 Performance API 采集子应用资源耗时的示例代码：
// 记录子应用开始加载的标记
performance.mark('subapp:order:start');
// 子应用挂载完成后，采集指定 JS 资源耗时
function collectResourceTiming(resourceName) {
const entries = performance.getEntriesByType('resource');
const target = entries.find(function (entry) {
return entry.name.indexOf(resourceName) !== -1;
});
if (target) {
return {
name: target.name,
duration: Math.round(target.duration),
transferSize: target.transferSize,
startTime: Math.round(target.startTime)
};
}
return null;
}
const timing = collectResourceTiming('order-app');
if (timing) {
console.log('子应用资源加载耗时：', timing.duration + 'ms');
performance.measure('subapp:order:resource', 'subapp:order:start');
}
需要说明，performance.measure 的第二个参数是开始 mark 名，第三个参数是结束 mark 名。若不加结束 mark，会量到当前时间，这在异步流程中非常实用。采集到的 measure 结果可以通过 performance.getEntriesByName 读取。
三、结合 Vue 3 生命周期与微前端钩子做分段打点
微前端框架一般会暴露子应用生命周期函数，qiankun 提供 bootstrap、mount、unmount，micro-app 也有类似机制。以 qiankun 为例，主应用注册子应用时可以拿到返回的 Promise，子应用代码里则在 export 的生命周期函数中调用 Vue 3 的 createApp 与 mount。在 mount 前后打点，能够准确得到 Vue 实例创建到 DOM 挂载的耗时。
下面展示子应用侧与主应用侧配合打点的思路。子应用入口文件在 mount 函数中记录 Vue 挂载完成时间：
// 子应用 main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
let app = null;
function render(props) {
const container = props.container;
const start = performance.now();
app = createApp(App);
app.use(router);
app.mount(container ? container.querySelector('#app') : '#app');
const end = performance.now();
performance.mark('subapp:vue3:mounted');
console.log('Vue 3 创建并挂载耗时：', Math.round(end - start) + 'ms');
}
export async function bootstrap() {
console.log('子应用启动');
}
export async function mount(props) {
render(props);
}
export async function unmount() {
if (app) {
app.unmount();
app = null;
}
}
主应用侧可以利用 qiankun 的 registerMicroApps 配置中的 activeRule 在全局状态中记录路由切换时间。再通过全局事件或状态管理收集子应用打点数据。如果不想在子应用里写过多监控逻辑，也可以直接在主应用通过 MutationObserver 监听子应用容器节点变化，把节点首次出现作为挂载完成信号。不过 MutationObserver 的触发时机可能比真实挂载晚，更适合做兜底判断。
要特别留意 Vue 3 的异步渲染机制。app.mount 返回之前，组件内部的 setup 与首次渲染已经执行完成，因此上述打点位置覆盖了首屏渲染的主要成本。但如果子应用使用了 Suspense 或异步组件，部分内容可能在首屏后再补渲染，这类延迟需要通过额外的自定义事件单独上报。
四、耗时数据上报与慢加载排查实践
采集到各阶段耗时后，数据需要统一上报才能形成监控价值。建议将一次子应用加载拆成最少四个字段：资源下载耗时、脚本解析与执行耗时、Vue 实例创建耗时、挂载完成耗时。前两个可以借助 Resource Timing 与生命周期差值计算，后两个由子应用打点返回。上报时同时携带子应用名称、路由路径、用户网络类型、设备类型和版本号。
常用字段设计如下：
- app_name：子应用名称，对应微前端注册信息
- route_path：触发加载的路由地址
- resource_duration：关键 JS 资源加载耗时，单位毫秒
- script_duration：脚本执行到挂载前耗时
- vue_mount_duration：Vue 3 createApp 到 mount 完成耗时
- total_duration：从路由切换开始到挂载完成的完整耗时
阈值设定上，资源下载耗时超过 800ms 基本可以判断网络或 CDN 存在问题；脚本解析与执行耗时超过 600ms 往往意味着子应用包体积过大或没有做好分包；Vue 3 挂载耗时超过 400ms 则需要检查首屏组件数量和请求耦合。将这三个阈值做成看板告警，能够快速定位慢加载的方向。
排障时先看资源耗时是否与网络指标同步升高，如果是，优先检查部署环境与缓存策略。再看脚本执行耗时是否随设备性能下降而明显变差，低端设备上可能需要减少依赖或使用动态 import 拆包。最后看 Vue 挂载阶段，是否存在大量同步接口请求或复杂计算。通过这种分层拆解，子应用性能问题不再是一个模糊的黑盒。
在 Vue 3 微前端架构下做性能监控，不能只依赖单一首屏时间。把加载链路切分为资源、执行、挂载三段，并分别使用 Performance API 与框架生命周期打点，能够形成稳定的耗时分析模型。文章给出的采集与上报方案可以作为团队性能看板的基础，后续结合采样和告警策略，可以及时发现子应用回归带来的加载劣化。