앱 모니터링 및 분석

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

Ivan Akulov

webpack을 구성하여 앱을 최대한 작게 만들더라도 앱을 추적하고 앱에 포함된 내용을 파악하는 것이 중요합니다. 그렇지 않으면 앱 크기를 두 배로 늘리는 종속 항목을 설치할 수 있으며, 이를 알아차리지 못할 수도 있습니다.

이 섹션에서는 번들을 이해하는 데 도움이 되는 도구를 설명합니다.

번들 크기 추적

앱 크기를 모니터링하려면 개발 중에 webpack-dashboard를 사용하고 CI에서 bundlesize를 사용하세요.

webpack-dashboard

webpack-dashboard는 종속 항목의 크기, 진행률, 기타 세부정보를 사용하여 webpack 출력을 개선합니다. 다음과 같이 표시됩니다.

webpack-dashboard 출력의 스크린샷

이 대시보드를 사용하면 대규모 종속 항목을 추적할 수 있습니다. 종속 항목을 추가하면 모듈 섹션에 즉시 표시됩니다.

사용 설정하려면 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와 통합하세요.

GitHub의 pull 요청 CI 섹션 스크린샷 CI 도구 중에는 번들 크기 출력이 있습니다.

구성하려면 다음 단계를 따르세요.

최대 크기 확인하기

  1. 앱을 최대한 작게 최적화합니다. 프로덕션 빌드를 실행합니다.

  2. 다음 내용에 따라 bundlesize 섹션을 package.json에 추가합니다.

    // package.json
{
  "bundlesize": [
    {
      "path": "./dist/*"
    }
  ]
}

  3. 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

  4. 각 크기에 10~20% 를 더하면 최대 크기가 됩니다. 이 10~20% 의 여유를 두면 평소처럼 앱을 개발하면서 크기가 너무 커지면 경고를 받을 수 있습니다.

    bundlesize 사용 설정

  5. bundlesize 패키지를 개발 종속 항목으로 설치합니다.

    npm install bundlesize --save-dev

  6. 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",
    }
  ]
}

  7. 다음과 같이 검사를 실행하는 npm 스크립트를 추가합니다.

    // package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

  8. 각 푸시에서 npm run check-size를 실행하도록 CI를 구성합니다. (GitHub에서 프로젝트를 개발하는 경우 bundlesize을 GitHub와 통합)

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

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

또는 실패한 경우:

bundlesize 출력의 스크린샷 일부 빌드 결과가 '실패'로 표시됨

추가 자료

번들이 너무 큰 이유 분석

번들을 자세히 살펴보고 어떤 모듈이 공간을 차지하는지 확인하는 것이 좋습니다. 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 크기를 비교하는 것이 좋습니다. 왼쪽의 사이드바를 사용하여 크기를 전환하세요.

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

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

Sean Larkin의 webpack 번들에 관한 훌륭한 분석도 확인해 보세요.

요약

  • webpack-dashboard 및 bundlesize를 사용하여 앱 크기를 파악하세요.
  • webpack-bundle-analyzer로 크기를 구성하는 요소 살펴보기