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