npm 包 psi-v5 使用教程

阅读时长 4 分钟读完

简介

psi-v5 是一个基于 Google PageSpeed Insights 的 npm 包,可用于检测网站性能并展示分析结果。它可以测量页面速度指标,并提供性能建议来使您的页面更快运行、更响应式。

这篇文章将详细介绍 psi-v5 的使用方法,包括安装、简单使用、常用配置选项等,并提供示例代码。

安装

使用 npm 可以很容易地安装 psi-v5:

简单使用

首先,您需要导入 psi-v5:

然后,您可以使用以下方法获取页面性能信息:

返回内容:

-- -------------------- ---- -------
-
  ----------------- - -- --- -- --
  ----- -------------
  --- ----------------------
  ------------------ - -- --- -- --
  ------------------------ - -- --- -- --
  -------------------- --
  --------------------- ---------------------------
  -------------- ----------------------
-

常用配置选项

除了默认选项之外,psi-v5 还支持一些自定义配置选项。以下是常用的选项:

选项名 类型 描述
nokey 布尔 是否使用 Google 的 API key(默认为 true,即无需 API key)
key 字符串 如果需要使用 API key,请在此处指定
strategy 字符串 策略名称,可选值为 desktopmobile,默认为 mobile
threshold 数字或对象 分数的阈值(参见“结果”部分),默认为 90
locales 字符串 指定语言和地区,例如 en_US,默认为 en_US
maxWait 整数 等待从服务器接收响应的最长时间(以毫秒为单位),默认为 10000
output 字符串 控制台日志消息的输出格式,可选值为 json 或者 text,默认为 text
options 对象 传递其他配置选项

下面是使用常用配置选项的示例:

-- -------------------- ---- -------
-------------------------- -
  ------ -----
  --------- ---------
  ---------- -
    ------------ ---
    -------------- ---
    -- ---
  --
  -------- ------
------------ -- -
  ------------------
---

结果

psi-v5 返回的结果包含以下内容:

  • lighthouseResult: Lighthouse 所生成的 JSON 格式的性能报告的副本。
  • id: 分析的 URL。
  • loadingExperience: 渲染页面的实时速度水平。
  • originLoadingExperience: 源页面的实时速度水平。
  • analysisUTCTimestamp: 分析结果的时间戳信息。
  • captchaResult: 如果算法认为您应该做验证码,则返回“CAPTCHA_REQUIRED”,否则为“CAPTCHA_NOT_REQUIRED”。

结论

psi-v5 是一个可以帮助前端开发人员优化网站性能的 npm 包,通过使用它,您可以测量网站性能并优化它们以提高其性能。该包提供了许多配置选项,以帮助您根据需要进行检测和分析。这个工具可以使您的网站更快更好地响应,从而提高用户的满意度。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006725c3660cf7123b363da

纠错
反馈