앱 모니터링 및 분석

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

이반 아쿨로프
이반 아쿨로프
Twitter GitHub 홈페이지

앱을 최대한 작게 만들도록 webpack을 구성하더라도 여전히 webpack을 추적하고 어떤 항목이 포함되어 있는지 아는 것이 중요합니다. 아니면 앱의 크기를 두 배로 늘려도 알아차리지 못하는 종속 항목을 설치할 수 있습니다.

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

번들 크기 추적

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

webpack-dashboard

webpack-dashboard는 종속 항목의 크기, 진행 상황, 기타 세부정보로 Webpack 출력을 개선합니다. 표시되는 방식은 다음과 같습니다.

webpack-dashboard 출력 스크린샷

이 대시보드는 큰 종속 항목을 추적하는 데 도움이 됩니다. 종속 항목을 추가하면 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와 통합하여 앱이 너무 커질 때 알림을 받습니다.

GitHub pull 요청의 CI 섹션 스크린샷 CI 도구 중에 Bundlesize 출력은

구성하려면 다음 안내를 따르세요.

최대 크기 알아보기

  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-dashboard 및 bundlesize를 사용하여 앱 크기 확인
  • webpack-bundle-analyzer를 사용하여 크기를 형성하는 요소를 살펴보세요.