@tracing/browser-resource

提供页面资源加载监控

基于 PerformanceObserver

使用

``sh

pnpm install @tracing/core @tracing/browser-resource

`

`ts
import { TracingCore } from "@tracing/core";
import { BrowserResourcePlugin } from "@tracing/browser-resource";

const collect = new TracingCore({
plugins: [BrowserResourcePlugin()] // 页面资源监控已应用
});

collect.init();
`

配置项

`ts
export interface ResourceConfig {
watchResource: (timing: PerformanceResourceTiming) => boolean;
resourceTimingMeasure: (timing: PerformanceResourceTiming) => Record;
}
`

$3

- Type: (timing: PerformanceResourceTiming) => boolean 选填
- Default: defineWatchResource

需要监听哪些资源文件

$3

- Type: (timing: PerformanceResourceTiming) => Record 选填
- Default: defineResourceTimingMeasure`

上报数据格式化

资源时间顺序

!timing

基于此你可以做很多微妙的事情，比如：获取资源缓存命中率、资源加载快照，来对你的资源进行优化

详细参考 文档