Application Insights能否追踪AngularJS中app.js、vendor.js加载耗时

完全可以实现，不需要改动你已经搭建完成的API调用追踪逻辑，根据你当前的SDK接入情况，选对应方案即可：

方案1：开启SDK默认资源采集能力（改动最小） #

• 官方JavaScript SDK默认就会自动采集页面所有静态资源（JS、CSS、图片等）的加载性能数据，数据归在browserTimings和pageView相关指标下，你只需要确认SDK初始化配置里collectResourceTimings参数没有被设为false（这个参数默认是开启状态）。
• 如果应用加载的资源数量较多，可以把resourceTimingBufferSize从默认的200调到500，避免缓冲区满导致app.js、vendor.js这类后加载的大体积资源漏采，初始化配置参考：

const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: '你自己的接入密钥',
    collectResourceTimings: true,
    resourceTimingBufferSize: 500
  }
});
appInsights.loadAppInsights();

• 数据上报后，直接在Application Insights的日志查询面板过滤对应资源名就能拿到加载时长数据，查询语句参考：

browserTimings
| where url contains "app.js" or url contains "vendor.js"
| project timestamp, url, duration, performanceBucket, client_City, client_OS

方案2：手动埋点精准采集（适配特殊加载场景） #

如果你的两个核心JS是动态注入加载、或者因为跨域配置问题导致SDK自动采集的数据不准，可以直接用自定义指标埋点，和你已有的API追踪逻辑写法完全兼容：

• 在脚本开始加载前记录起始时间，脚本加载完成触发回调时计算实际加载时长，调用trackMetric方法上报即可，示例代码：

function trackCoreScript(scriptPath, scriptMark) {
  const startTime = performance.now();
  const scriptNode = document.createElement('script');
  scriptNode.src = scriptPath;
  scriptNode.onload = () => {
    const costTime = performance.now() - startTime;
    appInsights.trackMetric({
      name: `core_script_load_${scriptMark}`,
      average: costTime,
      sampleCount: 1
    });
  };
  document.head.appendChild(scriptNode);
}
// 分别追踪两个核心文件
trackCoreScript('/assets/vendor.js', 'vendor');
trackCoreScript('/assets/app.js', 'app');

注意如果静态资源托管在独立CDN域名下，需要给CDN配置Timing-Allow-Origin响应头，否则浏览器出于安全限制会隐藏真实加载时长，SDK拿到的时长数据会是0。

内容的提问来源于stack exchange，提问作者Brent Theunckens