Vuejs 的性能指标

Question

我正在寻找 Vue 应用程序的性能指标。 有关整个应用程序的指标，但也适用于某些特定组件。

我知道我可以使用Vue.config.performance = true; 然后运行性能开发工具，也许我可以使用Performance Observer之类的东西来对新的性能事件做特定的事情。

我想知道是否有任何库或服务可以帮助或提供有关性能的更多指标。 我们的想法是拥有一个具有这些指标的用户界面，并且可以对非开发人员可见。

有任何想法吗？

Answer 1

您可以使用 npm 中的web- vitals 库。 它支持核心 web 生命体征指标：

• 最大含量的油漆，
• 第一次输入延迟
• 累积版面偏移

示例将如下所示：

import { getLCP, getFID, getCLS } from "web-vitals";

const reporter = (result) => console.log(result);

getCLS(reporter);
getFID(reporter);
getLCP(reporter);

在处理程序内部，您可以将结果记录到控制台或将您的报告系统发送给他们以进行进一步分析。

也可以从这里获取 CDN 版本