Lighthouse Score Badge 项目使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00355/article/details/141988584

Lighthouse Score Badge 项目使用教程

lighthouse-badgeLighthouse score badge项目地址:https://gitcode.com/gh_mirrors/li/lighthouse-badge

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

lighthouse-badge/
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── app.yaml
├── package.json
├── server.js
└── yarn.lock

.eslintrc.js: ESLint 配置文件，用于代码风格检查。
.gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 跟踪。
LICENSE: 项目许可证文件，本项目使用 Apache-2.0 许可证。
README.md: 项目说明文件，包含项目的基本信息、使用方法等。
app.yaml: Google App Engine 配置文件，用于部署应用。
package.json: Node.js 项目的配置文件，包含项目的依赖、脚本等信息。
server.js: 项目的启动文件，定义了服务器的行为和路由。
yarn.lock: Yarn 包管理器的锁定文件，确保依赖版本的一致性。

2. 项目的启动文件介绍

server.js 是 Lighthouse Score Badge 项目的启动文件。它主要负责以下功能：

设置 HTTP 服务器，监听指定端口。
定义路由，处理来自客户端的请求。
调用 Lighthouse 工具生成网站性能评分，并返回相应的评分徽章。

以下是 server.js 文件的部分代码示例：

const express = require('express');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

const app = express();
const PORT = process.env.PORT || 8080;

app.get('/score', async (req, res) => {
  const url = req.query.url;
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance']};
  const runnerResult = await lighthouse(url, options, null);
  await chrome.kill();
  const score = runnerResult.lhr.categories.performance.score * 100;
  res.send(`Lighthouse score: ${score}`);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3. 项目的配置文件介绍

3.1 `app.yaml`

app.yaml 是 Google App Engine 的配置文件，用于定义应用的运行环境、资源分配等。以下是 app.yaml 文件的内容示例：

runtime: nodejs14

handlers:
- url: /.*
  script: auto

runtime: 指定应用的运行环境，这里是 Node.js 14。
handlers: 定义 URL 路由，/.* 表示匹配所有 URL，script: auto 表示自动选择合适的脚本处理请求。

3.2 `package.json`

package.json 是 Node.js 项目的配置文件，包含项目的元数据、依赖、脚本等信息。以下是 package.json 文件的部分内容示例：

{
  "name": "lighthouse-badge",
  "version": "1.0.0",
  "description": "Lighthouse score badge",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "lighthouse": "^7.3.0",
    "chrome-launcher": "^0.13.4"
  }
}

name: 项目名称。
version: 项目版本号。
description: 项目描述。
main: 项目的入口文件，这里是 server.js。
scripts: 定义项目的脚本命令，例如 start 命令用于启动服务器。
dependencies: 项目的依赖包，例如 express、lighthouse 和 chrome-launcher。