Vuejs 的性能指标

Question

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

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

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

有什么想法吗？

Answer 1

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

• Largest contenfull paint,
• First input delay
• Cumulative layout shift

示例如下所示：

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

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

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

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

也可以从here获取CDN版本