Vuej에 대한 성능 메트릭

Vuej에 대한 성능 메트릭

Vue 앱의 성능 메트릭을 찾고 있습니다.앱 전체뿐만 아니라 일부 특정 구성 요소에 대한 메트릭입니다.

는 내가 사용해도 있다.Vue.config.performance = true;퍼포먼스 개발 툴을 실행하여 퍼포먼스 옵저버 등의 기능을 사용하여 새로운 퍼포먼스 이벤트에서 특정 작업을 수행할 수 있습니다.

퍼포먼스에 관한 더 많은 메트릭을 제공하거나 도와줄 수 있는 라이브러리나 서비스가 있는지 궁금합니다.이러한 메트릭을 사용하는 UI를 사용하는 것이 바람직하며 개발자가 아닌 사람에게도 표시될 수 있습니다.

좋은 생각 있어요?

npm부터 Web-vitals 라이브러리를 사용할 수 있습니다.핵심 웹 바이탈 메트릭을 지원합니다.

• 가장 큰 콘텐풀 페인트,
• 첫 번째 입력 지연
• 누적 레이아웃 이동

예를 들어 다음과 같습니다.

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

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

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

핸들러 내부에서 결과를 콘솔에 기록하거나 상세 분석을 위해 보고서 시스템을 전송할 수 있습니다.

CDN 버전도 이쪽에서 입수할 수 있습니다.

언급URL : https://stackoverflow.com/questions/70421930/performance-metrics-for-vuejs