perfmor 是一个优化 Web 性能的工具集合，可以帮助前端工程师分析页面性能并提供相应的优化建议。它集成了 Lighthouse、PageSpeed Insights 和 Chrome 开发者工具等多个工具，提供了可视化的性能分析报告，并且可以实时监测页面性能变化。本文将介绍如何使用 perfmor。
安装 perfmor
perfmor 是一个 npm 包，可以通过 npm 安装：
npm install -g perfmor
接着，我们在项目目录下执行以下命令：
perfmor init
这个命令将会在项目根目录下生成一个名为「perfmor.config.js」的配置文件。
配置 perfmor
我们打开刚才生成的配置文件「perfmor.config.js」，可以看到以下内容：
-- -------------------- ---- -------
-------------- - -
------------- -
-------- -
------- ----------
------- ----------
----------- ------
----------- ------------
--
------- -
------- ----- ----
------- ---------
----------- -----
----------- ----------
--
--
-------- -
-------- -
---- --------------------------
----- -
--
------- -
---- --------------------------
----- -
-
-
--这个配置文件定义了两个环境「desktop」和「mobile」，每个环境都有相应的配置。
device：定义了设备类型，可以是 Chrome 开发者工具中支持的任意设备。preset：定义了页面视口大小和 DPR。connection：定义了网络连接类型。throttling：定义了网络瓶颈情况。url：页面 URL。runs：测试次数。
可以根据需要自行修改这些参数。
运行 perfmor
配置文件编写完毕后，我们可以在命令行中执行以下命令：
perfmor run --env desktop
这个命令将会使用「desktop」环境的配置对指定的 URL 进行一次性能测试，并生成相应的性能分析报告。
命令行输出类似如下：
-- -------------------- ---- ------- - ------- --- ----- ------- -------- ------------------ --- ---- - ------ ---------- ------- ----------- ------ -- ------------- ------ -- ---- --------- ------ --- --- ------ -- ------- ----- ---------- ------ --- - ----- ------ --- - ---- -- ------------ --- - ----- ---------- ------ --- - ----- --- ----- --- -
这个报告包含了多个指标，如性能得分、首次绘制时间、交互性能等，我们可以根据这些数据来识别性能瓶颈并做出相应的优化方案。
除了命令行报告外，还可以通过浏览器打开以下链接，查看更详细的性能分析报告：
file:///path/to/perfmor/report/desktop-20220128-201211-713/index.html
实时监测页面性能
在运行 perfmor 时，可以在命令行中加入以下参数：
perfmor watch --env desktop
这个命令会实时监测页面的性能状况，并在控制台中输出变化数据。
总结
perfmor 是一款非常强大的性能监测工具，可以帮助我们分析页面性能并提供相应的优化建议，非常有助于我们优化网站的性能。在使用 perfmor 时，需要合理设置测试环境和参数，并结合实际情况做出相应的优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c6f81e8991b448ebe56