빌드 프로세스에 성능 예산 통합

Milica Mihajlija

성능 예산을 정의했다면 이제 빌드 프로세스를 설정할 차례입니다. 그것을 추적하기 위해서입니다. 기준점을 정의할 수 있는 다양한 도구가 있습니다. '알림'이 표시됩니다. 예산을 초과하면 경고가 표시됩니다. 알아보기 니즈와 현재 설정에 가장 적합한 것을 선택하는 방법을 배울 것입니다. 🕵️‍♀️

Lighthouse 성능 예산

Lighthouse는 성능, 접근성, 권장사항, 프로그레시브 웹 애플리케이션로서의 사이트 성능 등 몇 가지 핵심 영역에서 사이트를 테스트하는 감사 도구입니다.

Lighthouse의 명령줄 버전 (v5 이상)은 다음을 기반으로 성능 예산 설정을 지원합니다.

• 리소스 크기
• 리소스 수

다음 리소스 유형에 대해 예산을 설정할 수 있습니다.

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

예산은 JSON 파일에서 설정되며 이를 새로운 '예산 초과'로 정의하면 열은 한도를 초과했는지 여부를 알려줍니다.

</ph> <ph type="x-smartling-placeholder">

Webpack 성능 힌트

Webpack은 코드가 사용자에게 제공되는 방식을 최적화하기 위한 강력한 빌드 도구입니다. 애셋 크기에 따라 실적 예산을 설정할 수도 있습니다.

번들 크기가 한도를 초과하면 명령줄 경고 또는 오류를 받으려면 webpack.config.js에서 성능 힌트를 사용 설정하세요. 개발 과정 내내 애셋 크기에 주의를 기울이는 데 좋은 방법입니다.

빌드 단계가 끝나면 webpack이 애셋 및 해당 크기를 색상으로 구분된 목록으로 출력합니다. 예산을 초과하는 금액은 노란색으로 강조표시됩니다.

</ph> <ph type="x-smartling-placeholder">

애셋과 진입점의 기본 한도는 250KB입니다. 구성 파일에서 타겟을 직접 설정할 수 있습니다.

</ph> <ph type="x-smartling-placeholder">

예산은 압축되지 않은 애셋 크기와 비교됩니다. 압축되지 않은 JavaScript 크기는 실행 시간과 관련이 있으며 특히 휴대기기에서 큰 파일은 실행하는 데 시간이 오래 걸릴 수 있습니다.

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.

번들 크기

Bundlesize는 설정한 임곗값에 따라 애셋 크기를 테스트하는 간단한 npm 패키지입니다. 로컬에서 실행되고 CI와 통합할 수 있습니다.

번들 크기 CLI

테스트할 기준과 파일을 지정하여 bundlesize CLI를 실행합니다.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize는 색상으로 구분된 테스트 결과를 한 줄로 출력합니다.

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

CI용 번들 크기

pull 요청에 크기 제한을 자동으로 적용하도록 번들 크기를 CI와 통합하면 번들 크기를 최대한 활용할 수 있습니다. bundlesize 테스트가 실패하면 해당 pull 요청은 병합되지 않습니다. Travis CI, CircleCI, Wercker, Drone을 사용하는 GitHub의 pull 요청에 대해 작동합니다.

</ph> <ph type="x-smartling-placeholder">

현재 앱 속도가 빠르더라도 새 코드를 추가하면 변경되는 경우가 많습니다. bundlesize로 pull 요청을 확인하면 성능 회귀를 방지할 수 있습니다. 부트스트랩, Tinder, Trivago 등에서 예산을 관리하는 데 이 도구를 사용하고 있습니다.

번들 크기를 사용하면 각 파일에 개별적으로 기준점을 설정할 수 있습니다. 이는 애플리케이션에서 번들을 분할하는 경우에 특히 유용합니다.

기본적으로 gzip으로 압축된 애셋 크기를 테스트합니다. 압축 옵션을 사용하여 brotli 압축으로 전환하거나 완전히 사용 중지할 수 있습니다.

Lighthouse 봇

Lighthouse 봇은 Travis CI와 통합되며 5가지 Lighthouse 감사 카테고리를 기반으로 예산을 시행합니다. 예를 들어 Lighthouse 성능 점수의 예산이 100이라고 가정해 보겠습니다. 개별 애셋 예산보다 하나의 수치를 계속 지켜보는 것이 더 간단한 경우가 있으며 Lighthouse 점수는 여러 요소를 고려합니다.

</ph> <ph type="x-smartling-placeholder">

Lighthouse 봇은 사용자가 스테이징 서버에 사이트를 배포한 후 감사를 실행합니다. .travis.yml에서 --perf, --a11y, --bp, --seo 또는 --pwa 옵션으로 특정 Lighthouse 카테고리의 예산을 설정합니다. 90점 이상으로 그린존에 머무르는 것을 목표로 하세요.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

GitHub의 pull 요청 점수가 설정된 기준 미만이면 Lighthouse 봇이 pull 요청 병합을 차단할 수 있습니다. ⛔

</ph> <ph type="x-smartling-placeholder">

그러면 Lighthouse Bot이 업데이트된 점수로 pull 요청에 댓글을 작성합니다. 이는 코드가 변경될 때 성능에 관한 대화를 촉진하는 유용한 기능입니다.

</ph> <ph type="x-smartling-placeholder">

Lighthouse 점수가 낮아 pull 요청이 차단된 경우 Lighthouse CLI 또는 개발자 도구에서 감사를 실행하세요. 병목 현상에 관한 세부정보와 간단한 최적화를 위한 힌트가 포함된 보고서를 생성합니다.

요약