I'm looking for performance metrics for a Vue app. Metrics regarding the whole app but also for some specific components.
I know that I can use Vue.config.performance = true; and then run the performance dev tools and maybe I could use something like Performance Observer in order to do specific things on new performance events.
I was wondering, if there are any libraries or services that could help or provide more metrics regarding the performance. The idea would be to have a ui with these metrics and could be visible for non-devs.
Any ideas?
You can use web-vitals library from the npm. It supports core web vitals metrics:
Example will be looks like this:
import { getLCP, getFID, getCLS } from "web-vitals";
const reporter = (result) => console.log(result);
getCLS(reporter);
getFID(reporter);
getLCP(reporter);
Inside handler you can log the result to the console or send them your report system for further analysis.
It's also possible to get CDN version from here