Web Vitals Element 项目教程

1. 项目目录结构及介绍

Web Vitals Element 是一个开源项目，用于在网页上展示 Web Vitals 指标。项目目录结构如下：

web-vitals-element/
├── src/                      # 源代码目录
│   ├── index.html            # 项目主页面
│   ├── package.json          # 项目配置文件
│   ├── rollup.config.js      # Rollup 打包配置文件
│   └── ...                  # 其他源代码文件
├── .gitignore                # Git 忽略文件
├── CODE-OF-CONDUCT.md        # 行为准则
├── LICENSE                   # 开源协议文件
├── README.md                 # 项目说明文件
└── ...                       # 其他项目文件

• src/：包含项目的所有源代码文件。
• index.html：项目的主页面文件。
• package.json：项目的配置文件，定义了项目的依赖、脚本和元数据。
• rollup.config.js：Rollup 打包工具的配置文件，用于将源代码打包成可发布的格式。
• .gitignore：指定 Git 忽略的文件和目录。
• CODE-OF-CONDUCT.md：项目的行为准则，指导贡献者的行为规范。
• LICENSE：项目的开源协议文件，本项目采用 MIT 协议。
• README.md：项目的说明文件，介绍了项目的用途、使用方法和贡献指南。

2. 项目的启动文件介绍

项目的启动文件是 src/index.html。这个 HTML 文件是项目的入口点，它包含了用于展示 Web Vitals 指标的自定义元素 <web-vitals> 的使用示例。

<!-- Include the custom element script -->
<script src="node_modules/web-vitals-element/dist/web-vitals-element.min.js"></script>

<!-- Basic usage -->
<web-vitals></web-vitals>

<!-- Define the metrics you care about -->
<web-vitals cls fcp fid lcp ttfb></web-vitals>

<!-- Show message about not support metrics -->
<web-vitals show-unsupported></web-vitals>

在这个文件中，可以通过引入不同的脚本文件来使用不同样式的 <web-vitals> 元素。元素支持多个 Web Vitals 指标，如 CLS（Cumulative Layout Shift）、FCP（First Contentful Paint）、FID（First Input Delay）、LCP（Largest Contentful Paint）和 TTFB（Time To First Byte）。

3. 项目的配置文件介绍

项目的配置文件是 src/package.json。这个文件定义了项目的依赖、脚本和元数据。

{
  "name": "web-vitals-element",
  "version": "1.0.0",
  "description": "A custom element to display web vitals metrics on your page.",
  "main": "dist/web-vitals-element.min.js",
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w"
  },
  "keywords": [
    "custom-elements",
    "web-vitals"
  ],
  "dependencies": {
    "rollup": "^2.56.0"
  },
  "devDependencies": {
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-sass": "^1.0.0",
    "rollup-plugin-terser": "^7.0.0"
  },
  "author": "Stefan Judis",
  "license": "MIT"
}

在这个文件中：

• "name" 和 "version"：定义了项目名称和版本。
• "description"：项目的简短描述。
• "main"：指定了项目的入口文件。
• "scripts"：定义了项目的构建和监视脚本。
• "keywords"：定义了与项目相关的关键词。
• "dependencies" 和 "devDependencies"：分别定义了项目的生产依赖和开发依赖。
• "author"：项目的作者。
• "license"：项目的开源协议。