Travis CI와 함께 bundlesize 사용

Milica Mihajlija

bundlesize를 Travis CI와 함께 사용하면 최소한의 설정으로 성능 예산을 정의하고 개발 워크플로의 일부로 적용할 수 있습니다. Travis CI는 GitHub에 코드를 푸시할 때마다 클라우드에서 앱 테스트를 실행하는 서비스입니다. 번들 크기 테스트를 통과하지 않는 한 pull 요청 병합을 허용하지 않도록 저장소를 구성할 수 있습니다.

Bundlesize의 GitHub 체크에는 기본 브랜치와의 크기 비교와 크기가 크게 증가한 경우의 경고가 포함됩니다.

실제로 작동하는 모습을 보려면 좋아하는 고양이에 투표할 수 있는 webpack으로 번들링된 앱을 확인하세요.

성능 예산 설정

이 Glitch에는 이미 bundlesize가 포함되어 있습니다.

• Remix to Edit(리믹스하여 수정)을 클릭하여 프로젝트를 수정할 수 있도록 합니다.

이 앱의 기본 번들은 public 폴더에 있습니다. 크기를 테스트하려면 다음 섹션을 package.json 파일에 추가하세요.

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

압축된 JavaScript 번들 크기를 권장 한도 미만으로 유지하려면 maxSize 필드에서 성능 예산을 170KB로 설정하세요.

Bundlesize는 glob 패턴을 지원하며 파일 경로의 * 와일드 카드 문자는 public 폴더의 모든 번들 이름과 일치합니다.

테스트 스크립트 만들기

Travis는 실행할 테스트가 필요하므로 package.json에 테스트 스크립트를 추가하세요.

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

지속적 통합 설정

GitHub 및 Travis CI 통합

먼저 GitHub 계정에서 이 프로젝트의 새 저장소를 만들고 README.md로 초기화합니다.

Travis에 계정을 등록하고 프로필의 설정 섹션에서 GitHub Apps 통합을 활성화해야 합니다.

계정이 있으면 프로필의 설정 으로 이동하여 계정 동기화 버튼을 클릭하고 새 저장소가 Travis에 나열되어 있는지 확인합니다.

pull 요청에 게시할 수 있도록 bundlesize 승인

Bundlesize는 pull 요청에 게시할 수 있도록 승인이 필요하므로 이 링크를 방문하여 Travis 구성에 저장될 bundlesize 토큰 을 가져옵니다.

프로젝트의 Travis 대시보드에서 추가 옵션 > 설정 > 환경 변수 로 이동합니다.

토큰을 값 필드로, BUNDLESIZE_GITHUB_TOKEN을 이름으로 사용하여 새 환경 변수를 추가합니다.

지속적 통합을 시작하는 데 필요한 마지막 항목은 Travis CI에 수행할 작업을 알려주는 .travis.yml 파일입니다. 속도를 높이기 위해 이미 프로젝트에 포함되어 있으며 앱이 NodeJS를 사용한다고 지정합니다.

이 단계를 통해 모든 설정이 완료되며 JavaScript가 예산을 초과하면 bundlesize에서 경고합니다. 처음에는 잘 시작하더라도 시간이 지남에 따라 새 기능을 추가하면 킬로바이트가 쌓일 수 있습니다. 자동화된 성능 예산 모니터링을 사용하면 눈에 띄지 않을 것이라는 걱정 없이 안심할 수 있습니다.

사용해 보기

첫 번째 bundlesize 테스트 트리거

앱이 성능 예산과 어떻게 비교되는지 확인하려면 3단계에서 만든 GitHub 저장소에 코드를 추가하세요.

1. Glitch에서 Tools(도구) > Git, Import, and Export(Git, 가져오기, 내보내기) > Export to GitHub(GitHub로 내보내기)를 클릭합니다.

2. 팝업에서 GitHub 사용자 이름과 저장소 이름을 username/repo로 입력합니다. Glitch는 앱을 'glitch'라는 새 브랜치로 내보냅니다.

3. 저장소의 홈페이지에서 New pull request(새 pull 요청) 버튼을 클릭하여 새 pull 요청을 만듭니다.

이제 pull 요청 페이지에서 진행 중인 상태 체크가 표시됩니다.

모든 체크가 완료되는 데는 시간이 오래 걸리지 않습니다. 아쉽게도 고양이 투표 앱은 약간 부풀어 있으며 성능 예산 체크를 통과하지 못합니다. 기본 번들은 266KB이고 예산은 170KB입니다.

최적화

다행히도 사용하지 않는 코드를 삭제하여 쉽게 성능을 개선할 수 있습니다. src/index.js에는 두 가지 기본 가져오기가 있습니다.

import firebase from "firebase";
import * as moment from 'moment';

앱은 Firebase 실시간 데이터베이스를 사용하여 데이터를 저장하지만 데이터베이스 (인증, 스토리지, 메시지 등)보다 훨씬 많은 항목으로 구성된 전체 Firebase 패키지를 가져옵니다.

앱에 필요한 패키지만 src/index.js 파일로 가져와 이 문제를 해결합니다.

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

테스트 재실행

소스 파일이 업데이트되었으므로 webpack을 실행하여 새 번들 파일을 빌드해야 합니다.

1. Tools(도구) 버튼을 클릭합니다.

2. 그런 다음 Console(콘솔) 버튼을 클릭합니다. 그러면 콘솔이 다른 탭에서 열립니다.

3. 콘솔에서 webpack을 입력하고 빌드가 완료될 때까지 기다립니다.

4. Tools(도구) > Git, Import, and Export(Git, 가져오기, 내보내기) > Export to GitHub(GitHub로 내보내기)에서 GitHub로 코드를 내보냅니다.

5. GitHub의 pull 요청 페이지로 이동하여 모든 체크가 완료될 때까지 기다립니다.

완료되었습니다. 번들의 새 크기는 125.5KB이며 모든 체크를 통과했습니다. 🎉

Firebase와 달리 moment 라이브러리의 일부를 가져오는 것은 쉽지 않지만 시도해 볼 만합니다. 사용하지 않는 코드 삭제 Codelab에서 앱을 추가로 최적화하는 방법을 알아보세요.

모니터링

이제 앱이 예산 범위 내에 있으며 모든 것이 잘 작동합니다. Travis CI와 bundlesize는 성능 예산을 계속 모니터링하여 앱의 속도를 유지합니다.