Travis CI에서 bundlesize를 사용하면 최소한의 설정으로 성능 예산을 정의하고 개발 워크플로의 일부로 적용할 수 있습니다. Travis CI는 개발자가 GitHub에 코드를 푸시할 때마다 클라우드에서 앱 테스트를 실행하는 서비스입니다. bundlesize 테스트를 통과하지 않으면 pull 요청 병합을 허용하지 않도록 저장소를 구성할 수 있습니다.
Bundlesize의 GitHub 검사에는 기본 브랜치와의 크기 비교와 크기가 크게 증가한 경우의 경고가 포함됩니다.
작동 방식을 확인하려면 다음과 같이 webpack과 번들로 제공되는 앱을 사용하여 좋아하는 고양이에 투표해 보세요.
성능 예산 설정
이 Glitch에는 이미 bundlesize가 포함되어 있습니다.
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
이 앱의 기본 번들은 공개 폴더에 있습니다. 크기를 테스트하려면 다음 섹션을 package.json 파일에 추가합니다.
"bundlesize": [
{
"path": "./public/*.bundle.js",
"maxSize": "170 kB"
}
]
압축된 JavaScript 번들 크기를 권장 한도 미만으로 유지하려면 maxSize 필드에서 성능 예산을 170KB로 설정하세요.
Bundlesize는 glob 패턴을 지원하며 파일 경로의 * 와일드 카드 문자는 공개 폴더의 모든 번들 이름과 일치합니다.
테스트 스크립트 만들기
Travis를 실행하려면 테스트가 필요하므로 package.json에 테스트 스크립트를 추가합니다.
"scripts": {
"start": "webpack && http-server -c-1",
"test": "bundlesize"
}
지속적 통합 설정
GitHub 및 Travis CI 통합
먼저 GitHub 계정에서 이 프로젝트의 새 저장소를 만들고 README.md로 초기화합니다.
Travis에 계정을 등록하고 프로필의 설정 섹션에서 GitHub 앱 통합을 활성화해야 합니다.
계정이 생성되면 프로필의 설정으로 이동하여 계정 동기화 버튼을 클릭하고 새 저장소가 Travis에 표시되는지 확인합니다.
pull 요청에 게시하도록 bundlesize 승인
Bundlesize가 풀 요청에 게시하려면 승인이 필요하므로 Travis 구성에 저장될 이 링크를 방문하여 Bundlesize 토큰을 가져옵니다.
프로젝트의 Travis 대시보드에서 옵션 더보기 > 설정 > 환경 변수로 이동합니다.
토큰을 값 필드로, BUNDLESIZE_GITHUB_TOKEN을 이름으로 사용하여 새 환경 변수를 추가합니다.
지속적 통합을 시작하는 데 필요한 마지막 항목은 Travis CI에 할 일을 알려주는 .travis.yml 파일입니다. 속도를 높이기 위해 이 파일은 이미 프로젝트에 포함되어 있으며 앱이 NodeJS를 사용하고 있음을 지정합니다.
이 단계를 완료하면 설정이 완료되고 JavaScript가 예산을 초과하면 bundlesize에서 경고를 표시합니다. 처음에는 괜찮더라도 시간이 지남에 따라 새 기능을 추가하면 킬로바이트가 쌓일 수 있습니다. 자동 실적 예산 모니터링을 사용하면 실적 예산이 누락되지 않는다는 점을 확신할 수 있으므로 안심할 수 있습니다.
사용해 보기
첫 번째 bundlesize 테스트 트리거
앱이 실적 예산과 어떻게 비교되는지 확인하려면 3단계에서 만든 GitHub 저장소에 코드를 추가합니다.
Glitch에서 Tools > Git, Import, Export > Export to GitHub를 클릭합니다.
팝업에서 GitHub 사용자 이름과 저장소 이름을
username/repo로 입력합니다. Glitch에서 앱을 'glitch'라는 새 브랜치로 내보냅니다.저장소의 홈페이지에서 새 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을 실행하여 새 번들 파일을 빌드해야 합니다.
도구 버튼을 클릭합니다.
그런 다음 콘솔 버튼을 클릭합니다. 그러면 다른 탭에서 콘솔이 열립니다.
콘솔에서
webpack를 입력하고 빌드가 완료될 때까지 기다립니다.Tools > Git, Import, Export > Export to GitHub에서 GitHub로 코드를 내보냅니다.
GitHub의 pull 요청 페이지로 이동하여 모든 확인이 완료될 때까지 기다립니다.
완료되었습니다. 번들의 새 크기는 125.5KB이고 모든 검사가 통과했습니다. 🎉
Firebase와 달리 Moment 라이브러리의 일부를 가져오는 작업은 쉽지 않지만 시도해 볼 만합니다. 사용하지 않는 코드 삭제 Codelab에서 앱을 더 최적화하는 방법을 알아보세요.
모니터링
이제 앱이 예산 범위 내에 있으며 모든 것이 정상입니다. Travis CI와 bundlesize가 성능 예산을 계속 모니터링하여 앱이 빠르게 실행되도록 합니다.