Vuejs 的性能指标

Question

我正在寻找 Vue 应用程序的性能指标。有关整个应用程序以及某些特定组件的指标。

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

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

有什么想法吗？

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版本