domstat는 로컬에서 실행되고 웹 페이지 성능 통계를 확인하는 Puppeteer 기반 CLI 도구입니다.

Domstat는 선택한 Chrome 개발 도구 통계를 한 곳에서 통합하고 웹 페이지가 런타임에 어떻게 수행되는지에 대한 조감도 개요를 제공합니다.



Source code

이를 실행하려면 머신에 node & npm이 설치되어 있어야 합니다. downloading node.js을 통해 그렇게 할 수 있습니다.

npm 사용

npm i -g domstat 
domstat --url=example.com

또는 npx를 사용하여

npx domstat --url=example.com

구성

domstat는 DOM 사용자 타이밍 및 코드 적용 범위와 같은 브라우저 수준 API 번호를 구문 분석합니다. cURL 관련 정보에 대한 httpstat와 유사합니다.

domstat는 또한 Navigation Timing API를 사용하여 중요한 렌더링 경로를 측정하는 방법에 대한 자세한 설명을 제공하는 this web.dev article에서 영감을 얻었습니다.

domstat는 어떻게 도움이 됩니까?

다양한 웹사이트에 대한 DOM 타이밍 및 적용 범위를 확인하고 비교하려는 시나리오를 살펴보겠습니다.

다음은 다양한 프레임워크에서 최적화된 "영화"웹 애플리케이션에 대한 domstats입니다. https://github.com/orgs/tastejs/repositories에서 리포지토리를 찾을 수 있습니다.

모난:


Next.js:


눅스트:


위의 모든 영화 웹 응용 프로그램은 Lighthouse/Pagespeed 감사에서 90점 이상을 얻었습니다. 반면에 domstat는 브라우저의 API를 활용하고 로딩 동작에 대한 통찰력을 제공하여 더 많은 도움을 줍니다.

이러한 통계는 Chrome의 devtools에서 사용할 수 있지만 한 곳에 통합되지는 않습니다. 예: CSS 및 JS 적용 범위 통계는 Sources tab에 있으며 DOM 타이밍을 얻으려면 Performance tab에서 성능 감사를 실행해야 합니다.

Domstat는 이러한 모든 수치를 한 곳에서 통합하고 웹 페이지의 성능에 대한 조감도 개요를 제공합니다.

기본적으로 테스트에는 아직 cpu 또는 네트워크 스로틀링이 없지만 곧 이러한 플래그를 더 추가하고 싶습니다.

CLI 구축

CLI는 React를 사용하여 빌드됩니다. 예, 반응합니다! React는 많은 일을 할 수 있는 것 같습니다. Electron이 포함된 데스크탑 앱에서 Next.js가 포함된 풀스택 앱까지.

create-ink-app을 사용하여 CLI 도구를 빌드했습니다. create-ink-app는 Ink 앱을 위한 기본 프로젝트 구조를 가동하고 상용구를 피하고 아름다운 CLI를 즉시 구축할 수 있도록 합니다.

React로 CLI 도구를 작성하는 방법에 대해 자세히 알아보려면 ink을 확인하세요 :)

마무리 노트

저는 Chrome DevTools를 사용하여 사이트의 성능을 확인하고 테스트를 실행하여 여러 페이지의 런타임 성능을 확인하고 비교했습니다.

이 CLI 도구는 API를 잘 아는 데 한 걸음 더 가까워졌으며, 이 도구는 빠른 통찰력을 제공하고 이미 압도적인 브라우저의 개발 도구를 클릭하는 번거로움을 줄여줍니다.

도구를 더 개선할 수 있는 좋은 잠재력이 있습니다. Node.js 생태계와 React에 익숙하다면 이 도구를 개선하는 데 기여하는 것을 환영합니다.

목표는 도구와 같은 또 다른 등대를 만드는 것이 아니라 하나의 명령을 사용하여 브라우저의 API에서 중요한 흩어진 통계를 한 곳으로 통합하는 것입니다.