Webpack 번들을 추적하고 분석하는 데 사용하는 도구
앱을 가능한 한 작게 만들기 위해 webpack을 구성하더라도 여전히 그것을 추적하고 그것이 무엇을 포함하고 있는지 아는 것입니다. 그렇지 않은 경우 앱이 두 배 더 커진데, 눈치채지도 못할 겁니다!
이 섹션에서는 번들을 이해하는 데 도움이 되는 도구를 설명합니다.
번들 크기 추적
앱 크기를 모니터링하려면 다음을 사용하세요. webpack-dashboard를 사용하고 있으며 CI의 bundlesize
webpack-dashboard
webpack-dashboard는 webpack 출력을 향상시킵니다. 종속 항목 크기, 진행률, 기타 세부정보로 구성되어 있습니다 다음과 같이 표시됩니다.
이 대시보드는 대규모 종속 항목을 추적하는 데 도움이 됩니다. 종속 항목을 추가하면 즉시 확인할 수 있습니다. 모듈 섹션을 참고하세요.
사용 설정하려면 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());
언제든지 대시보드를 활용하여 개선의 여지가 있는 곳을 찾아보세요. 예를 들어 Modules 섹션을 스크롤하여 어떤 라이브러리가 너무 크고 작은 대안입니다.
번들 크기
bundlesize는 webpack 애셋이 다음을 초과하지 않는지 확인합니다. 크기일 수 있습니다. 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:
<ph type="x-smartling-placeholder">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 크기는 실제 사용자와 가깝기 때문에 이 크기를 비교하는 것이 좋습니다. 경험 크기를 전환하려면 왼쪽의 사이드바를 사용하세요.
보고서에서 확인할 사항은 다음과 같습니다.
- 큰 종속 항목. 왜 그렇게 큰 걸까요? 더 작은 대안 (예: 사전 괜찮을까요? 여기에 포함된 모든 코드 (예: Moment.js는 삭제될 수 있는 경우가 많음)?
- 중복된 종속 항목. 여러 파일에서 동일한 라이브러리가 반복되나요? (예:
Webpack 4에서
optimization.splitChunks.chunks
옵션 또는CommonsChunkPlugin
옵션 일반 파일로 이동) 번들에 여러 버전이 있나요? 액세스할 수 있나요? - 유사한 종속 항목. 거의 동일한 작업을 수행하는 유사한 라이브러리가 있나요? (예:
moment
및date-fns
또는lodash
및lodash-es
). 하나의 도구를 계속 유지해 보세요.
Sean Larkin의 Webpack에 대한 유용한 분석 결과도 확인해 보세요. 번들을 선택합니다.
요약
webpack-dashboard
및bundlesize
를 사용하여 앱 크기를 조정합니다.webpack-bundle-analyzer
로 규모를 증가시키는 요인을 알아보세요.