Automated Bundle Size Control in CI/CD: Setup and Optimization

The bundle grows unnoticed — we help you control it

You added one dependency, a colleague imported an entire utility — and a month later the JS bundle bloated by 200 KB. LCP dropped by 30%, and the culprit is nowhere to be found. In 80% of projects, developers notice the problem only after deploying to production. Automated bundle size checks in CI/CD stop degradation before it reaches release. Our engineers, with 5+ years of experience, set up such control for your stack. Initial consultation is free. Contact us for a bundle audit.

What problems we solve

• Invisible bundle growth — every new dependency increases size, but it's invisible in a PR until LCP jumps by 30%. For example, importing lodash entirely instead of lodash.get adds 20 KB in gzip.
• Code duplication — the same library in different chunks after code splitting, increasing total size by 10-15%.
• Bloated initial bundle — lazy loading not configured; the user downloads everything at once, increasing TTI by 2 seconds.
• Missing baseline — without a size history, it's hard to track which version caused a regression.

How it works

On each PR or deployment, we build the bundle, compare its size and individual chunk sizes against a baseline — values from the previous deployment or fixed limits. If the threshold is exceeded, CI fails or leaves a warning in PR. This can save up to $500 per month on performance maintenance.

Tools fall into two categories:

How bundlewatch helps control bundle size

Install it:

npm install --save-dev bundlewatch 

Configure in package.json:

{ "bundlewatch": { "files": [ { "path": "dist/assets/index-*.js", "maxSize": "150kB" }, { "path": "dist/assets/vendor-*.js", "maxSize": "400kB" }, { "path": "dist/assets/*.css", "maxSize": "50kB" } ], "ci": { "trackBranches": ["main", "master"], "repoBranchBase": "main" } } } 

In GitHub Actions:

name: Bundle Size Check on: [pull_request] jobs: bundlewatch: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 cache: npm - run: npm ci - run: npm run build - run: npx bundlewatch env: BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} CI_REPO_OWNER: ${{ github.repository_owner }} CI_REPO_NAME: ${{ github.event.repository.name }} CI_COMMIT_SHA: ${{ github.event.pull_request.head.sha }} CI_BRANCH: ${{ github.head_ref }} CI_BRANCH_BASE: ${{ github.base_ref }} 

bundlewatch leaves a comment in the PR with a table: current size, delta, status. More details at bundlewatch.

Setting up size-limit: deeper than just limits

size-limit analyzes the import tree: shows module weight considering tree-shaking and gzip.

npm install --save-dev size-limit @size-limit/preset-app 

.size-limit.json:

[ { "path": "dist/assets/index-*.js", "limit": "150 kB", "gzip": true }, { "name": "Vendor chunk", "path": "dist/assets/vendor-*.js", "limit": "380 kB", "gzip": true } ] 

In package.json:

{ "scripts": { "size": "size-limit", "analyze": "size-limit --why" } } 

--why runs webpack-bundle-analyzer and shows exactly what is pulling the size.

Why relative limits are more convenient than absolute?

Absolute limits become outdated as the project grows, and constantly raising numbers is tedious. An alternative: check delta against the base branch. We use a script that compares the current branch size with the base. The script builds, saves the current size, fetches the base branch size from CI artifacts, and calculates the delta. If the delta exceeds 10%, CI fails. This approach saves setup time and doesn't require manual limit updates.

What to check besides total size

• Number of chunks — growth in chunk count from code splitting can increase HTTP requests.
• Initial bundle size separately from lazy-loaded chunks — this impacts LCP and TTI.
• Dependency duplicates — when one library is pulled into multiple chunks in different versions. Analyze with npm ls <package> or npx duplicate-package-checker-webpack-plugin.

Comparison of approaches: bundlewatch vs size-limit

Typical mistakes and how to avoid them

Some teams forget to configure caching, making the check take 5+ minutes. We cache node_modules and .vite, reducing time to 40–60 seconds. Another mistake is setting limits “by eye”. The right way: measure current sizes and set a 10–15% buffer.

What's included in the work

• Audit of the current bundle and identification of problem areas.
• Setup of the chosen tool (bundlewatch or size-limit) with custom limits.
• Integration into CI/CD (GitHub Actions, GitLab CI, Bitbucket Pipelines).
• Documentation of the configuration and maintenance process.
• Team training on working with notifications and analysis.
• Post-release support for 1 month.

Estimated timeline

Basic bundlewatch setup in an existing CI pipeline takes 4 to 8 hours. Setting up size-limit with analysis and PR notifications takes 1 to 2 business days. The cost is calculated individually after evaluating your project. Get a consultation — we'll tell you which option is optimal. Order a bundle audit, and we'll propose concrete solutions.