作为一名前端开发工程师，我们必须时刻保持着对 web 应用性能的关注。我们好不容易写完一份代码，仅仅上线就令人激动。但是更难的是确保我们写的代码也跑的正确，问题相关就尤其用工具来发现。
这时候，一个自动化的工具就诞生了，它的名字就是 lighthouse。而 lighthouse-pwa 就是 lighthouse 的一个 npm 包。它在测量现代 web 应用的性能指标方面很有用，特别是在 PWA 方面，作为一款升级 PWA 的很好的工具。
在本文中，我们将学习如何使用 lighthouse-pwa，创建和维护一个高质量的 PWA。
什么是 lighthouse-pwa
lighthouse-pwa 是一个基于 lighthouse 基础上的核心扩展,np包,封装并提供了关于PWA 的统计和维护工具。 通俗地说，像以前版本的 Lighthouse 一样， Lighthouse-PWA 也可以验证许多对性能有影响的问题，而且特别是对于PWA来说。它透过 Chrome 浏览器自动化工具链，可使用您的服务端资产,分析您的网站，并提供有关性能的最佳建议。
安装 lighthouse-pwa
作为 npm 包，安装 lighthouse-pwa 很简单。您只需打开终端并运行以下命令即可：
npm install -g lighthouse-pwa
我们使用全局安装的方式，因为我们希望能够在整个系统中使用此工具。这个命令将安装 lighthouse-pwa 到全局 npm 模块中。现在，您可以运行 lighthouse-pwa 命令并尝试基本的验证。请打开终端并运行以下命令：
lighthouse-pwa https://example.com
现在，这个命令应该开始分析您提供的 URL，并提供一份详细的报告，其中包含当前网站的性能指标。
使用 lighthouse-pwa 进行 PWA 评估
由于 lighthouse-pwa 的核心扩展就是在 PWA 方面，使用 lighthouse-pwa 进行 PWA 评估就很简单。您只需将 URL 与 PWA 选项组合在一起：
lighthouse-pwa https://example.com --pwa
现在，这个命令应该生产出一个和 PWA 相关的报告。这个报告将显示与 PWA 相关的所有必要数据，包括manifest文件，Service Workers等。它还将包含与 PWA 相关的最佳实践，并为您的设计和开发提供建议。 lighthouse-pwa 报告的输出类似于以下内容：
在这个图中，您可以看到关于 PWA 的各种指标。Lighthouse-pwa 报告包含以下主要信息：
- 提供 HTTPS：该指标是为 PWA 必须使用 HTTPS 协议而设计的。
- 网站可达：该指标是为 PWA 中需要服务工作器而设计的。
- Web App Manifest：该指标是鉴别 web app manifest 文件是否存在。
- 所有内容都已缓存：该指标是为 PWA 中需要服务工作器而设计的。
- 交互：对于 PWA 输入和操作的反应时间。
- 降低启动耗时：该指标旨在减少首次加载时间和首次渲染。
此报告的重要信息用于优化您的 PWA 的性能和体验。
在自动化工作流中添加 lighthouse-pwa
您可以将 lighthouse-pwa 添加到您的自动化工作流程中，以确保您在设计之前就可以获得与 PWA 验证相关的实时反馈。
例如，在 lighthouse-pwa 中包含了一些 shell 命令，它们可以轻松地添加到 gulp 或 grunt 任务中。这个命令就是下面的例子：
-- -------------------- ---- -------
-------------- - --------------- -
-------------------------------- ---------- -
--- ---- - -------------
--- ---- - --------- -----------
--- ----- - -
------------------------
---------------------------------
--
--- ----- - -----------------
--- ----- - -------------------------------
--- ------ - ------------------
--- --------------- - -------------- ----- -
------ ------------------ -
--- ----- - ----------------------- ---------------------
--- ------ - ---
----------------------- -------------- -
---------------------------
------ -- -----
---
----------------------- -------------- -
---------------------------
---
----------------- -------------- -
-- ----- --- -- -
------------------------
-----------------
- ---- -
-------------- ------
-
---
--
--
--- ------- - ------------------------ - ------ --------------------- ---------
----------------------- ------------- -
-----------------------------
-------- -- ------
---
---
--在这些代码中，我们封装了 grunt 任务并使用 lighthouse-pwa 执行了一些基本检验，而不是使用命令行调用。这个方法提供了更多的灵活性，让您可以使用任何嵌入式或外部封装的系统。
这个例子只是为了说明如何将 lighthouse-pwa 集成到自动化任务中。您可以根据项目的要求进行更改和修改。不过，这个例子可以让您了解如何生成自动化工作流中的 lighthouse-pwa 报告。
总结
在本文中，我们学习了如何利用 lighthouse-pwa 包来优化 PWA 的优化和性能。我们已经看到了如何将 lighthouse-pwa 集成到自动化工作流中，以进行实时反馈。虽然我们还没有涉及所有 lighthouse-pwa 功能的细节，但它们已经足以使您开始对 PWA 进行评估了。
我们希望您能够发现这些指标很有帮助，可以用它来建立一个高质量和可扩展性的 web 应用。长期来看， lighthouse-pwa 将继续发展，接下来，我们期待更多的改善和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739781e8991b448e9897