前端开发自动化。第四部分
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
引言
本文将创建某个系统的一部分，而该系统又是更大系统的一部分。我们将只关注性能测试的运行。
注意：本文假设您对 Git、Github Webhooks、NodeJS和 Docker 非常熟悉。
NodeJS：这是包含所有代码的仓库。
问题
ABC公司拥有一项
SPA对业务至关重要的功能。该功能需要在移动端表现出色（我们稍后会定义“出色”的含义）。随着时间的推移，版本发布频率越来越高，因此迫切需要确保所有新版本都符合分配performance budget给它的功能。
解决方案
作为开发人员，我们必须确保每个版本都处于可部署状态。对我们而言，可部署意味着所有测试都已通过，并且新功能在类似生产环境中运行正常。此外，我们需要/希望能够即时获得关于下一个版本性能的反馈，因此提出了以下解决方案：
创建一个系统，在每次发布新版本时运行性能测试。
依赖关系
- dotenv是一个零依赖模块，它可以将环境变量从
.env文件中加载到系统中。process.env - NodeJS。
- Puppeteer . 无头 Chrome Node API。<!-- * ShellJS . 基于 Node.js API 的 Unix shell 命令 -->
- Lightouse CLI。审核我们的应用程序并获取相关数据。
1. 开发我们的分析工具
理想情况下，我们的下一个版本应该始终在上个版本的基础上有所改进，或者保持在可接受的范围内。如果情况开始偏离，我们需要尽快获取相关数据。
我们将创建一个函数来收集这些指标：
- JS 代码覆盖率和 CSS 代码覆盖率。该指标告诉我们实际使用的代码量与加载的代码量之比。
- 网络请求。列出页面加载期间发出的网络请求。
- 速度指数。速度指数显示页面内容可见加载的速度。
我们将运行 Lighthouse 提供的所有测试。以下是测试的先后顺序：
- 获取在测试/预发布/本地环境中运行的应用程序 URL。该 URL 应从配置文件中读取。
- 生成代码覆盖率。目前我们只获取首页的代码覆盖率。
- 运行 Lighthouse 审计。
- 过滤信息并将其发送到可以持久保存的位置。这可以是保存在文件系统中的 JSON 数据，也可以是数据库。随着应用程序的成熟，我们会将其定义在其他地方。
/**
* puppeteerPerformance.js
*/
'use strict';
require('dotenv').config();
const chromeLauncher = require( 'lighthouse/chrome-launcher/chrome-launcher' );
const fs = require( 'fs' );
const lighthouse = require( 'lighthouse' );
const { APP_URL } = proccess.env;
// 1.
const flags = {
output: 'json'
};
const launchChromeAndRunLighthouse = ( url, flags, config = null ) => {
return chromeLauncher.launch()
.then( chrome => {
flags.port = chrome.port;
return lighthouse( url, flags, config )
.then( results =>
chrome.kill()
.then( () => results )
);
} );
}
// 2.
launchChromeAndRunLighthouse( APP_URL, flags )
// 3.
.then( results => {
fs.writeFile( './results.json', JSON.stringify(results), function ( err ) {
if ( err ) {
return console.log( err );
}
console.log( 'The file was saved!' );
} );
});
请注意，该results变量可以发送到数据库并存储起来，以便进行历史比较。
在这种情况下，我们只需将其保存为 JSON 文件即可。
2. 未创建我们的 GitHub Action
真可惜：目前 GitHub Actions 还是公开测试版，我还在候补名单上。所以我们暂时会使用 GitHub WebHook。如果您能批准我的请求，我很乐意写篇博文分享一下。
NodeJS：这是包含所有代码的仓库。
我已经写过一篇关于如何设置 GitHub Webhooks 的博客文章。这次我会创建一个 Heroku 应用，并使用该应用的 URL 进行 URL 设置。
现在我们需要创建一个简单的 Express 应用程序，该应用程序在每次收到请求时都会运行测试。
我们将安装 Express
yarn add express
require('dotenv').config();
const { APP_STAGING_URL, APP_PRODUCTION_URL } = process.env;
const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const { lighthousePerfAudits } = require('./audits/lighthousePerfAudits');
const app = express();
const flags = {
output: 'json',
};
app.use(bodyParser.json());
app.post('/run', (req, res) => {
// 1. Check secret
if (req.headers['x-hub-signature']) {
/**
* Secret is valid,
* run tests and write json data
* on both environments
*/
lighthousePerfAudits(APP_PRODUCTION_URL, flags)
.then((results) => {
fs.writeFile('/production_results.json', JSON.stringify(results), (err) => {
if (err) {
return console.log(err);
}
console.log('The file was saved!');
});
});
lighthousePerfAudits(APP_STAGING_URL, flags)
.then((results) => {
fs.writeFile('/staging_results.json', JSON.stringify(results), (err) => {
if (err) {
return console.log(err);
}
console.log('The file was saved!');
});
});
// send response with 200
res.status(200).send();
} else {
res.status(500).send();
}
// secret is not valid, return 500
});
app.listen(process.env.PORT || 8080, () => {
console.log('App linstening on ', process.env.PORT || 8080);
});
结论
有了这个实例，每次向存储库推送部署时，我们都可以运行脚本并获取相关的指标。
该申请还有一些未完成的部分，例如：
- 这些数据应该保存在哪里？
- 有没有办法直接把它接入Github？
- 我们如何将产品发布表现的历史数据可视化？
- 狐狸怎么叫？
我会在后续文章中解答这些问题。我目前也在开发一个开源的SaaS产品，旨在解决这些问题。如果您还有其他疑问，欢迎在Twitter上联系我。
NodeJS：这是包含所有代码的仓库。
干杯。
更多资源：
文章来源：https://dev.to/jrioscloud/front-end-development-automation-part-4-3gjd