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에 계정을 등록하고 프로필의 Settings 섹션에서 GitHub 앱 통합을 활성화해야 합니다.
계정이 있으면 프로필 아래의 Settings로 이동하고 Sync account 버튼을 클릭하여 새 저장소가 Travis에 나열되는지 확인합니다.
pull 요청에 게시하도록 bundlesize 승인
Bundlesize는 pull 요청에 게시할 수 있도록 승인이 필요하므로 이 링크를 방문하여 Travis 구성에 저장될 번들 크기 토큰을 가져옵니다.
프로젝트의 Travis 대시보드에서 옵션 더보기 > 설정 > 환경 변수로 이동합니다.
토큰을 값 필드로, 이름이 BUNDLESIZE_GITHUB_TOKEN으로 지정된 새 환경 변수를 추가합니다.
지속적 통합을 시작하는 데 마지막으로 필요한 것은 Travis CI에 실행할 작업을 알려주는 .travis.yml 파일입니다. 속도를 높이기 위해 이미 프로젝트에 포함되어 있으며 앱이 NodeJS를 사용한다고 지정합니다.
이 단계를 완료하면 설정이 완료되며 JavaScript가 예산을 초과하면 bundlesize에서 경고를 표시합니다. 제대로 시작했더라도 시간이 지나면서 새로운 기능을 추가하면 킬로바이트가 쌓일 수 있습니다. 자동화된 성능 예산 모니터링을 사용하면 눈에 띄지 않게 되어 있으므로 안심할 수 있습니다.
사용해 보기
첫 번째 번들 크기 테스트 트리거
앱이 성능 예산 대비 어떤 상태인지 확인하려면 3단계에서 만든 GitHub 저장소에 코드를 추가합니다.
Glitch에서 Tools > Git, Import, and Export > 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 and Export(Git, 가져오기 및 내보내기) > Export to GitHub(GitHub으로 내보내기)에서 코드를 GitHub로 내보냅니다.
GitHub의 pull 요청 페이지로 이동하여 모든 검사가 완료될 때까지 기다립니다.
완료되었습니다. 번들의 새로운 크기는 125.5KB이며 모든 검사를 통과했습니다. 🎉
Firebase와 달리 순간 라이브러리의 일부를 가져오는 것은 쉬운 일이 아니지만, 한 번 시도해 볼 가치가 있습니다. 사용하지 않는 코드 삭제 Codelab에서 앱을 더 최적화하는 방법을 알아보세요.
모니터링
현재 이 앱은 예산 내에서 운영되며 모든 것이 잘 작동합니다. Travis CI와 bundlesize는 성능 예산을 계속 모니터링하여 앱의 속도를 빠르게 유지합니다.