<aside> 💡 목차

</aside>

자동화 없는 Lighthouse 측정의 한계점

1. 코드 수정 후 빌드 → 실행 → 개발자 도구를 통해 라이트하우스를 매번 측정하는 과정이 매우 비효율적이라고 느껴집니다.
2. 페이지 수정 또는 새로 제작된 기능이 PR로 제출될 때, 성능 지표가 자동으로 제공되지 않으면 성능 관리에 있어 놓칠 수 있습니다. 즉각적인 피드백이 부족하여 성능 저하가 발생할 가능성이 높아지며, 이는 최종 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

효율적인 Lighthouse 측정을 위한 자동화 방법

1. CLI로 콘솔에 성능 지표가 자동으로 나타나도록 설정합니다.
2. PR 생성 시, 자동으로 성능 지표가 코멘트로 뜨게 하여 개발자들이 쉽게 성능을 확인할 수 있도록 합니다.

CLI로 성능 지표 띄우기(with lighthouse CI 라이브러리)

1. Lighthouse CI 라이브러리 설치

pnpm add @lhci/cli --save-dev

2. root에 .lighthouserc.cjs 생성

// .lighthouserc.cjs

module.exports = {
  ci: {
    collect: {
      staticDistDir: './dist', 
      url: ['<http://localhost:3000>'],
      numberOfRuns: 5,
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

• 왜 cjs 확장자를 사용했는가?

  • 우리 프로젝트는 ES Module이고 Lighthouse CI는 CommonJS 방식이라 그 사이의 충돌을 해결해주기 위해 cjs 확장자를 사용했습니다.
  • .cjs: 무조건 CommonJS로 해석
  • .mjs: 무조건 ES Modules로 해석

• collect.staticDistDir:

  • 빌드 된 파일이 저장된 폴더를 지정합니다
  • Lighthouse CI는 해당 경로의 html 파일을 통해서 성능을 측정합니다.

• collect.url

  • Lighthouse CI가 내부적으로 서버를 실행할 때, 사용자가 url에 입력한 포트 번호(3000)를 사용합니다.

  • http://localhost:3000에 접속해서 성능을 측정합니다.

  • 여러 페이지를 측정하고 싶다면 배열에 URL을 추가할 수 있습니다:

    url: [
      '<http://localhost:3000>',
      '<http://localhost:3000/about>',
      '<http://localhost:3000/contact>'
    ]
    

• collect.numberOfRuns

  • 각 url마다 지정된 횟수(여기서는 5번)만큼 테스트를 실행합니다.

• upload.target

  • 테스트 결과를 어디에 저장할지 지정하는 설정
  • temporary-public-storage: Lighthouse CI가 제공하는 무료 임시 저장소, 누구나 접근 가능, 약 7일 동안 결과를 보관

3. package.json에 script 설정

• 로컬에 설치된 Lighthouse CI를 실행할 때, 왜 CLI에서는 npx가 필요하지만 package.json의 scripts에서는 npx가 필요하지 않을까?

  • CLI에서 직접 실행할 때:

    lhci autorun
    

    • 시스템은 전역 PATH에서만 찾습니다.
    • 시스템은 오직 전역 PATH에 등록된 경로에서만 실행 파일을 찾습니다
    • 전역 설치되지 않았다면 명령어를 찾을 수 없다는 에러가 발생
    • 따라서 npx를 사용해야 로컬/전역/임시 설치를 모두 확인할 수 있습니다

  • package.json의 scripts를 통해 실행할 때

    {
      "scripts": {
        "lighthouse": "lhci autorun"
      }
    }
    

    • npm/pnpm이 스크립트 실행 시 임시 쉘 환경을 만들고, 그 환경의 PATH에 node_modules/.bin 디렉토리를 추가
    • 실행 순서:
      1. 로컬의 node_modules/.bin 디렉토리를 먼저 검색
      2. 찾지 못하면 전역 설치된 패키지를 검색
    • 따라서 스크립트 내에서는 npx 없이도 로컬 패키지를 실행할 수 있습니다.

4. 실행