出现在：快速加载时间

原文地址：web.dev/use-lightho…

原文作者：

发布时间：2019年6月14日-2020年4月3日更新。

Lighthouse现在支持性能预算。LightWallet这个功能可以在5分钟内完成设置，并提供性能指标、页面资源的大小和数量的反馈。

安装Lighthouse

LightWallet可在Lighthouse v5+的命令行版本中使用。

要开始使用，请安装Lighthouse。

npm install -g lighthouse

创建一个预算

创建一个名为 budget.json 的文件。在这个文件中添加以下JSON。

[
  {
    "path": "/*",
    "timings": [
      {
        "metric": "interactive",
        "budget": 3000
      },
      {
        "metric": "first-meaningful-paint",
        "budget": 1000
      }
    ],
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 125
      },
      {
        "resourceType": "total",
        "budget": 300
      }
    ],
    "resourceCounts": [
      {
        "resourceType": "third-party",
        "budget": 10
      }
    ]
  }
]

本例 budget.json 文件设置了五个独立的预算。

• 互动时间的预算为3000ms。
• 第一次有意义的绘画的预算为1000ms。
• 页面上的JavaScript总量预算为125KB。
• 页面整体大小的预算为300KB。
• 向第三方发起的请求数量的预算为10个请求。

有关支持的性能指标和资源类型的完整列表，请参阅Lighthouse文档中的性能预算部分。

运行Lighthouse

使用--budget-path标志来运行Lighthouse，该标志告诉Lighthouse你的预算文件的位置。这个标志告诉Lighthouse你的预算文件的位置。

lighthouse https://example.com --budget-path=./budget.json

注意：预算文件不必命名为 budget.json。

查看结果

如果LightWallet配置正确，Lighthouse报告中的 "绩效 "类别中会有 "预算 "部分。

Lighthouse报告中的 "Budgets "部分。

在JSON版本的Lighthouse报告中，Lightwallet的结果可以在performance-budget审计的审计结果中找到。

www.deepl.com 翻译