Perfume.js 使用文档

Perfume.js 使用文档

perfume.jsWeb performance library for measuring all performance vitals metrics项目地址:https://gitcode.com/gh_mirrors/pe/perfume.js

1. 项目的目录结构及介绍

Perfume.js 是一个用于性能监控的 JavaScript 库。以下是其主要的目录结构：

perfume.js/
├── dist/
│   ├── perfume.js
│   ├── perfume.min.js
│   └── perfume.min.js.map
├── src/
│   ├── core/
│   ├── metrics/
│   ├── options/
│   ├── perfume.js
│   └── utils/
├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录介绍

• dist/: 包含编译后的文件，可以直接在项目中使用。
  • perfume.js: 未压缩的源码。
  • perfume.min.js: 压缩后的源码。
  • perfume.min.js.map: 源码映射文件。
• src/: 源代码目录。
  • core/: 核心功能模块。
  • metrics/: 性能指标模块。
  • options/: 配置选项模块。
  • perfume.js: 主入口文件。
  • utils/: 工具函数模块。
• .babelrc: Babel 配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证。
• package.json: npm 包配置文件。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

Perfume.js 的启动文件是 src/perfume.js。这个文件是整个库的入口点，负责初始化和配置 Perfume.js。

import { initPerformanceObserver } from './core/initPerformanceObserver';
import { logMetric } from './core/logMetric';
import { reportPerf } from './core/reportPerf';
import { getNavigationTiming } from './metrics/getNavigationTiming';
import { getUserTiming } from './metrics/getUserTiming';
import { observe } from './core/observe';
import { options } from './options/options';
import { utils } from './utils/utils';

class Perfume {
  constructor(config) {
    this.config = { ...options, ...config };
    this.init();
  }

  init() {
    initPerformanceObserver();
    observe();
  }

  // 其他方法...
}

export default Perfume;

启动文件介绍

• 导入模块: 导入了核心功能、性能指标、配置选项和工具函数等模块。
• 类定义: 定义了 Perfume 类，包含构造函数和初始化方法。
• 初始化: 在构造函数中合并默认配置和用户配置，并调用 init 方法进行初始化。
• 导出: 导出 Perfume 类作为库的入口。

3. 项目的配置文件介绍

Perfume.js 的配置文件是 src/options/options.js。这个文件定义了默认的配置选项，用户可以在实例化 Perfume 类时传入自定义配置。

export const options = {
  analyticsTracker: undefined,
  maxMeasureTime: 15000,
  logging: true,
  timeToInteractiveThreshold: 8000,
  firstContentfulPaintThreshold: 3000,
  firstPaintThreshold: 2000,
  navigationTiming: true,
  userTiming: true,
  dataConsumption: true,
};

配置文件介绍

• analyticsTracker: 用于自定义分析跟踪的函数。
• maxMeasureTime: 最大测量时间，单位为毫秒。
• logging: 是否启用日志输出。
• timeToInteractiveThreshold: 可交互时间阈值，单位为毫秒。
• firstContentfulPaintThreshold: 首次内容绘制时间阈值，单位为毫秒。

perfume.jsWeb performance library for measuring all performance vitals metrics项目地址:https://gitcode.com/gh_mirrors/pe/perfume.js