이 페이지는 Cloud Translation API를 통해 번역되었습니다.

앱 모니터링 및 분석

Webpack 번들을 추적하고 분석하는 데 사용할 도구

Ivan Akulov

앱을 최대한 작게 만들 수 있도록 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());

대시보드를 자유롭게 살펴보고 개선이 필요한 부분을 찾아보세요. 예를 들어 모듈 섹션을 스크롤하여 너무 크고 더 작은 대안으로 대체할 수 있는 라이브러리를 찾습니다.

bundlesize

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를 구성합니다. bundlesize에서 프로젝트를 개발하는 경우 bundlesize를 GitHub와 통합합니다.

완료되었습니다. 이제 npm run check-size를 실행하거나 코드를 푸시하면 출력 파일이 충분히 작은지 확인할 수 있습니다.

bundlesize 출력의 스크린샷 모든 빌드 결과가 '통과'로 표시됩니다.

또는 실패한 경우:

추가 자료

타겟팅해야 하는 실제 로드 시간에 관한 Alex Russell의 동영상

번들이 너무 큰 이유 분석

번들을 자세히 살펴보고 공간을 차지하는 모듈을 확인할 수 있습니다. webpack-bundle-analyzer를 만나보세요.

(github.com/webpack-contrib/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 크기를 비교하는 것이 좋습니다. 왼쪽 사이드바를 사용하여 크기를 전환하세요.

보고서에서 살펴볼 것은 다음과 같습니다.

대용량 종속 항목 왜 그렇게 큰 걸까요? 더 작은 대안이 있나요 (예: Preact)를 사용해야 하나요? 여기에 포함된 모든 코드 (예: Moment.js에 자주 사용되지 않고 삭제할 수 있는 언어가 많이 포함되어 있나요?
중복된 종속 항목 여러 파일에 동일한 라이브러리가 반복적으로 표시되나요? 예를 들어 webpack 4의 optimization.splitChunks.chunks 옵션 또는 webpack 3의 CommonsChunkPlugin를 사용하여 공통 파일로 이동합니다. 아니면 번들에 동일한 라이브러리의 여러 버전이 있나요?
유사한 종속 항목 거의 동일한 작업을 수행하는 유사한 라이브러리가 있나요? (예: moment 및 date-fns 또는 lodash 및 lodash-es) 단일 도구를 사용하는 것이 좋습니다.

또한 숀 러킨의 webpack 번들 분석도 확인해 보세요.

요약

webpack-dashboard 및 bundlesize를 사용하여 앱 크기를 계속 확인
webpack-bundle-analyzer를 사용하여 크기를 구성하는 요소 살펴보기