webpack 번들을 추적하고 분석하는 데 사용하는 도구
앱을 최대한 작게 만들도록 webpack을 구성하더라도 여전히 webpack을 추적하고 어떤 항목이 포함되어 있는지 아는 것이 중요합니다. 아니면 앱의 크기를 두 배로 늘려도 알아차리지 못하는 종속 항목을 설치할 수 있습니다.
이 섹션에서는 번들을 이해하는 데 도움이 되는 도구를 설명합니다.
번들 크기 추적
앱 크기를 모니터링하려면 개발 중에는 webpack-dashboard를 사용하고 CI에서는 bundlesize를 사용합니다.
webpack-dashboard
webpack-dashboard는 종속 항목의 크기, 진행 상황, 기타 세부정보로 Webpack 출력을 개선합니다. 표시되는 방식은 다음과 같습니다.
이 대시보드는 큰 종속 항목을 추적하는 데 도움이 됩니다. 종속 항목을 추가하면 Modules 섹션에 즉시 표시됩니다.
사용 설정하려면 webpack-dashboard
패키지를 설치합니다.
npm install webpack-dashboard --save-dev
구성의 plugins
섹션에 플러그인을 추가합니다.
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
Express 기반 개발 서버를 사용하는 경우 compiler.apply()
를 사용하세요.
compiler.apply(new DashboardPlugin());
언제든지 대시보드를 사용하여 개선이 필요한 부분을 찾아보세요. 예를 들어 모듈 섹션을 스크롤하여 어떤 라이브러리가 너무 커서 더 작은 대안으로 대체될 수 있는지 찾습니다.
번들 크기
bundlesize는 웹팩 애셋이 지정된 크기를 초과하지 않는지 확인합니다. CI와 통합하여 앱이 너무 커질 때 알림을 받습니다.
구성하려면 다음 안내를 따르세요.
최대 크기 알아보기
앱을 최적화하여 최대한 작게 만드세요. 프로덕션 빌드를 실행합니다.
다음 콘텐츠와 함께
bundlesize
섹션을package.json
에 추가합니다.// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
npx로
bundlesize
를 실행합니다.npx bundlesize
이렇게 하면 각 파일의 gzip으로 압축된 크기가 출력됩니다.
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
각 크기에 10~20% 를 추가하면 최대 크기가 표시됩니다. 이 10~20% 의 마진을 통해 평소처럼 앱을 개발할 수 있으며, 앱의 크기가 너무 커지면 경고 메시지를 표시할 수 있습니다.
bundlesize
사용 설정bundlesize
패키지를 개발 종속 항목으로 설치합니다.npm install bundlesize --save-dev
package.json
의bundlesize
섹션에서 구체적인 최대 크기를 지정합니다. 일부 파일 (예: 이미지)의 경우 각 파일이 아닌 파일 형식별로 최대 크기를 지정할 수 있습니다.// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
검사를 실행하는 npm 스크립트를 추가합니다.
// package.json { "scripts": { "check-size": "bundlesize" } }
각 푸시에서
npm run check-size
를 실행하도록 CI를 구성합니다. (또한 GitHub에서 프로젝트를 개발하는 경우bundlesize
를 GitHub와 통합합니다.)
감사합니다 이제 npm run check-size
를 실행하거나 코드를 푸시하면 출력 파일이 충분히 작은지 확인할 수 있습니다.
또는 실패할 경우:
추가 자료
- Alex Russell 타겟팅해야 하는 실제 로드 시간에 대해
번들이 그렇게 큰 이유 분석
번들에서 공간을 차지하는 모듈을 확인하려면 번들을 더 자세히 살펴보는 것이 좋습니다. webpack-bundle-analyzer를 소개합니다.
webpack-bundle-analyzer가 번들을 스캔하고 번들에 포함된 항목을 시각화합니다. 이 시각화를 사용하여 크거나 불필요한 종속 항목을 찾습니다.
분석 도구를 사용하려면 webpack-bundle-analyzer
패키지를 설치합니다.
npm install webpack-bundle-analyzer --save-dev
webpack 구성에 플러그인을 추가합니다.
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
프로덕션 빌드를 실행합니다 플러그인은 브라우저에서 통계 페이지를 엽니다.
기본적으로 통계 페이지에는 파싱된 파일의 크기 (즉, 번들에 표시되는 파일)가 표시됩니다. 실제 사용자 경험에 더 가깝기 때문에 gzip 크기를 비교하는 것이 좋습니다. 왼쪽 사이드바를 사용하여 크기를 전환하세요.
보고서에서 살펴볼 항목은 다음과 같습니다.
- 큰 종속 항목. 왜 이렇게 큰가요? 더 작은 대안이 있는가 (예: React 대신 Preact)를 사용할 수 있나요? 포함된 모든 코드를 사용하나요 (예: Moment.js에 자주 사용되지 않아 삭제될 수 있는 언어가 많이 포함되어 있나요?
- 종속 항목 중복. 동일한 라이브러리가 여러 파일에서 반복되나요? 예를 들어 webpack 4에서는
optimization.splitChunks.chunks
옵션을, webpack 3에서는CommonsChunkPlugin
옵션을 사용해 파일을 공통 파일로 이동합니다. 아니면 번들에 동일한 라이브러리의 여러 버전이 있나요? - 유사한 종속 항목. 거의 동일한 작업을 수행하는 유사한 라이브러리가 있나요? (예:
moment
및date-fns
또는lodash
및lodash-es
) 단일 도구를 유지해 보세요.
Sean Larkin의 웹팩 번들 분석도 확인해 보세요.
요약
webpack-dashboard
및bundlesize
를 사용하여 앱 크기 확인webpack-bundle-analyzer
를 사용하여 크기를 형성하는 요소를 살펴보세요.