앱 모니터링 및 분석

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());

언제든지 대시보드를 활용하여 개선의 여지가 있는 곳을 찾아보세요. 예를 들어 Modules 섹션을 스크롤하여 어떤 라이브러리가 너무 크고 작은 대안입니다.

번들 크기

bundlesize는 webpack 애셋이 다음을 초과하지 않는지 확인합니다. 크기일 수 있습니다. 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:

<ph type="x-smartling-placeholder">
</ph>
(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 크기는 실제 사용자와 가깝기 때문에 이 크기를 비교하는 것이 좋습니다. 경험 크기를 전환하려면 왼쪽의 사이드바를 사용하세요.

보고서에서 확인할 사항은 다음과 같습니다.

  • 큰 종속 항목. 왜 그렇게 큰 걸까요? 더 작은 대안 (예: 사전 괜찮을까요? 여기에 포함된 모든 코드 (예: Moment.js는 삭제될 수 있는 경우가 많음)?
  • 중복된 종속 항목. 여러 파일에서 동일한 라이브러리가 반복되나요? (예: Webpack 4에서 optimization.splitChunks.chunks 옵션 또는 CommonsChunkPlugin 옵션 일반 파일로 이동) 번들에 여러 버전이 있나요? 액세스할 수 있나요?
  • 유사한 종속 항목. 거의 동일한 작업을 수행하는 유사한 라이브러리가 있나요? (예: moment 및 date-fns 또는 lodash 및 lodash-es). 하나의 도구를 계속 유지해 보세요.

Sean Larkin의 Webpack에 대한 유용한 분석 결과도 확인해 보세요. 번들을 선택합니다.

요약

  • webpack-dashboard 및 bundlesize를 사용하여 앱 크기를 조정합니다.
  • webpack-bundle-analyzer로 규모를 증가시키는 요인을 알아보세요.