번들을 과체중이 되지 않게 하세요

Source: Dev.to

Overweight란 무엇인가?

Overweight는 최신의, 설정이 필요 없는 CLI로, 빌드 산출물의 크기 예산을 정의할 수 있게 해줍니다. 파일이 예산을 초과하면 Overweight가 오류를 발생시켜 CI 파이프라인이 실패합니다.

설치 및 사용법

Overweight를 npx로 바로 실행할 수 있습니다:

# Basic usage
npx overweight --file "dist/*.js" --max-size 50kb

# Specify compression type
npx overweight --file "dist/*.js" --max-size "15 kB" --compression brotli

로컬에 설치하고 싶다면:

pnpm add -D overweight
pnpm overweight

설정

package.json에 overweight 섹션을 추가하거나 독립적인 overweight.config.json 파일을 만들세요. 아래는 앱의 다양한 부분에 대해 압축 유형과 제한을 혼합한 실제 예시입니다:

{
  "checks": [
    {
      "path": "build/static/js/main.*.js",
      "maxSize": "150kb",
      "compression": "brotli"
    },
    {
      "path": "build/static/js/chunk-*.js",
      "maxSize": "50kb",
      "compression": "gzip"
    },
    {
      "path": "build/static/css/*.css",
      "maxSize": "20kb",
      "compression": "none"
    }
  ]
}

설정된 예산으로 검사를 실행합니다:

npx overweight

CI 통합

Overweight는 CI에서 앱을 부풀리는 풀 리퀘스트를 차단할 때 빛을 발합니다. 아래는 PR 및 main 브랜치에 푸시될 때 실행되는 바로 사용할 수 있는 GitHub Action 워크플로우 예시입니다:

name: bundle-overweight-test

on:
  pull_request:
  push:
    branches: [main]

jobs:
  overweight:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: yoavniran/overweight@v1
        with:
          config: overweight.json
          update-baseline: true
          report-file: overweight-report.json
          github-token: ${{ secrets.GITHUB_TOKEN }}

• 파일이 허용된 크기를 초과하면 작업이 실패합니다.
• update-baseline이 true이고 보고서가 변경되면(크기 또는 설정 업데이트로 인해) 액션이 별도의 PR을 만들어 보고서 파일을 업데이트합니다.

기능

• Modern defaults – 오늘날의 CI 환경을 위해 설계되었습니다.
• Flexible config – glob 패턴, 파일별 압축 설정(Brotli, Gzip, 또는 없음).
• Zero‑config CLI – 설정 파일을 커밋하지 않고도 바로 사용해볼 수 있습니다.
• Reliable CI – GitHub Actions와 원활하게 작동합니다.

시작하기

Overweight를 사용해보고 번들 크기 증가에 대한 걱정을 멈추세요.

GitHub에서 Overweight를 확인하세요 – 마음에 든다면 ⭐️를 눌러 주세요.