Estoy buscando métricas de rendimiento para una aplicación Vue. Métricas con respecto a toda la aplicación, pero también para algunos componentes específicos.
Sé que puedo usar Vue.config.performance = true; y luego ejecutar las herramientas de desarrollo de rendimiento y tal vez podría usar algo como Performance Observer para hacer cosas específicas en nuevos eventos de rendimiento.
Me preguntaba si hay bibliotecas o servicios que puedan ayudar o proporcionar más métricas con respecto al rendimiento. La idea sería tener una interfaz de usuario con estas métricas y podría ser visible para los que no son desarrolladores.
¿Algunas ideas?
Puede usar la biblioteca web- vitals de npm. Es compatible con las métricas principales de web vitals:
El ejemplo se verá así:
import { getLCP, getFID, getCLS } from "web-vitals"; const reporter = (result) => console.log(result); getCLS(reporter); getFID(reporter); getLCP(reporter);Dentro del controlador, puede registrar el resultado en la consola o enviarles su sistema de informes para un análisis más detallado.
También es posible obtener la versión CDN desde aquí