作为前端工程师，我们时常需要对网站进行性能优化，而 Lighthouse 工具就是非常好用的一款工具，可以帮助我们快速分析网站性能，并提供相应的建议。
但是，由于 Lighthouse 生成的报告数据可能存在一些奇怪的差异和不一致，导致对开发和优化工作造成一定的麻烦，此时 npm 包 lighthouse-normalize 就可以帮助我们快速规范化 Lighthouse 的报告数据，以便更好地进行分析和优化。
下面将结合实例讲解 lighthouse-normalize 的使用方法。
安装
npm install lighthouse-normalize
使用
const { normalize } = require('lighthouse-normalize');将 Lighthouse 的报告 JSON 数据传递给 normalize 函数：
const normalizedResults = normalize(originalResults);
然后，normalizedResults 就是规范化后的 Lighthouse 报告 JSON 数据。
示例
例如，以下是一份 Lighthouse 报告的 JSON 数据：
-- -------------------- ---- -------
-
--------- -
------------------------- - -------- --- --
-------------- - -------- --- --
--------------------------- - -------- --- --
-------------- - -------- --- --
---------------------- - -------- --- -
-
-对这份数据进行规范化：
const { normalize } = require('lighthouse-normalize');
const originalResults = JSON.parse(rawLighthouseResults);
const normalizedResults = normalize(originalResults);得到的规范化后的数据：
-- -------------------- ---- -------
-
-------------- -
------------------------- - -------- --- --
-------------- - -------- --- --
--------------------------- - -------- --- --
-------------- - -------- --- --
---------------------- - -------- --- -
-
-经过规范化处理后，可以看到所有的 Audit 名称都被移动到了一个名为 performance 的键下，使得数据更加易于理解和分析。
结语
使用 lighthouse-normalize 规范化 Lighthouse 的报告数据，可以帮助我们更好地进行性能优化工作，并且避免了一些不必要的麻烦，相信对于前端工程师来说是非常实用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672981e8991b448e3a8e