Web Vitals 开源项目教程

Web Vitals 开源项目教程

web-vitalsEssential metrics for a healthy site.项目地址:https://gitcode.com/gh_mirrors/we/web-vitals

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

Web Vitals 项目的目录结构如下：

web-vitals/
├── src/
│   ├── lib/
│   │   ├── base.ts
│   │   ├── constants.ts
│   │   ├── errors.ts
│   │   ├── on_hidden.ts
│   │   ├── util.ts
│   │   └── web_vitals.ts
│   ├── polyfills/
│   │   ├── index.ts
│   │   └── polyfills.ts
│   ├── types/
│   │   └── index.ts
│   ├── index.ts
│   ├── web-vitals.js
│   └── web-vitals.d.ts
├── test/
│   ├── __fixtures__/
│   ├── __mocks__/
│   ├── lib/
│   ├── polyfills/
│   ├── types/
│   ├── index.test.ts
│   └── web-vitals.test.ts
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── webpack.config.js

目录结构介绍

• src/：包含项目的主要源代码。

  • lib/：包含核心库文件，如 base.ts、constants.ts 等。
  • polyfills/：包含必要的 polyfill 文件。
  • types/：包含 TypeScript 类型定义文件。
  • index.ts：项目的主入口文件。
  • web-vitals.js：编译后的 JavaScript 文件。
  • web-vitals.d.ts：TypeScript 类型声明文件。

• test/：包含项目的测试文件。

  • __fixtures__/：包含测试用的固定数据。
  • __mocks__/：包含模拟数据。
  • lib/、polyfills/、types/：对应的测试文件。
  • index.test.ts、web-vitals.test.ts：主测试文件。

• 根目录下的文件：

  • .gitignore、.npmignore：Git 和 npm 忽略文件。
  • .prettierrc：Prettier 配置文件。
  • .travis.yml：Travis CI 配置文件。
  • CHANGELOG.md：变更日志。
  • CODE_OF_CONDUCT.md、CONTRIBUTING.md：行为准则和贡献指南。
  • LICENSE：许可证文件。
  • README.md：项目说明文档。
  • package.json：npm 包配置文件。
  • tsconfig.json：TypeScript 配置文件。
  • webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts。这个文件是整个项目的入口点，负责导出主要的 API 和功能。

// src/index.ts
export { getCLS, getFCP, getFID, getLCP, getTTFB } from './lib/web_vitals';

这个文件导出了五个主要的函数：getCLS、getFCP、getFID、getLCP 和 getTTFB，分别用于获取 Cumulative Layout Shift (CLS)、First Contentful Paint (FCP)、First Input Delay (FID)、Largest Contentful Paint (LCP) 和 Time to First Byte (TTFB) 这些核心 Web Vitals 指标。

3. 项目的配置文件介绍

tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件，定义了 TypeScript 编译器的选项和项目结构。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015", "dom"],
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,

web-vitalsEssential metrics for a healthy site.项目地址:https://gitcode.com/gh_mirrors/we/web-vitals