《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的 Keepfast 是一个性能分析工具,能够分析网站的资源构建性能和页面性能,生成性能报告并提供优化建议,让性能监控更方便。
KeepFast介绍
主要特性:
- 分析并生成构建性能报告,可直观的对比两个版本的构建性能,以便尽早发现构建性能问题
- 基于 Lighthouse 对网站进行性能测试,给出各方面性能指标和相关建议
- 预置 Gitee API 支持,能够在 Gitee 仓库中有新的提交时为其生成一个性能报告,随时跟踪性能指标和得分
安装
npm install -g lighthouse @gitee/keepfast
使用
先为你的项目创建配置文件:
# 进入你的项目目录cd /path/to/your/repo# 初始化配置文件keepfast init
然后修改 keepfast.config.js 配置文件,完善 repository 字段信息,如果你的项目是由 Vue CLI 创建和管理的,剩下的配置内容保持原样即可。
生成报告
运行性能测试并将报告输出到 ./report.json 文件中:
keepfast report ./report.json
上传报告
上传报告会调用 Gitee API,为了让 keepfast 有权限操作你的仓库,你需要提供一个私人令牌,它可在设置 > 私人令牌 页面中生成,生成后运行以下命令添加环境变量:
export GITEE_API_ACCESS_TOKEN=你的私人令牌
之后运行以下命令上传报告:
keepfast upload ./report.json
如果当前分支已有对应的 Pull Request,则会将报告上传到该 Pull Request 的评论中,否则上传到当前 Commit 详情页的评论中。
在 Gitee Go 中使用
Gitee Go 是 Gitee 推出的 CI/CD(持续构建与集成)服务,用户可以通过自定义构建流程,实现构建集成自动化。
在你的仓库的 master 分支上新建流水线文件,使用如下配置:
name: keepfastdisplayName: keepfasttriggers: push: branches: - master - developsteps: - step: npmbuild@1 name: npm-build displayName: npm-build inputs: nodeVersion: 12.7 goals: >- yum clean all yum install -y epel-release yum -y update yum install -y chromium npm config set registry https://registry.npm.taobao.org export GITEE_API_ACCESS_TOKEN=$KEEPFAST_API_TOKEN export SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install npm install -g lighthouse @gitee/keepfast keepfast report ./report.json keepfast upload ./report.json
然后在仓库的环境变量管理页面中设置 KEEPFAST_API_TOKEN 环境变量的值为你的访问令牌。