skills.rest
btabaska
btabaskaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Bundle Size Check

Analyze Next.js build manifests to detect per-route bundle-size regressions.

1|1|Updated Mar 31, 2026
Search Tags:#performance#frontend#reporting#nextjs#bundle-size#build-analysis#per-route
One-click install
npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill bundle-size-check
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Bundle Size Check
Source: https://github.com/btabaska/simpler-grants-documentation-automation/tree/main/.cursor/skills/skill-bundle-size-check
Command: npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill bundle-size-check

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevent bundle-size regressions from shipping by giving developers a fast local report on Next.js route bundle sizes, per-dependency weight, and the top offending imports, with concrete remediation (dynamic import, lighter alternative, tree-shake config).

Core Features & Use Cases

  • Per-route bundle size analysis with delta reporting.
  • Offender identification with remediation suggestions (dynamic import, lighter alternative, tree-shake config).
  • Baseline comparison and budget enforcement for pre-release sweeps.

Quick Start

Run the performance bundle check after building the frontend to generate the per-route report and identify offenders.

Frequently Asked Questions about Bundle Size Check

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I analyze per-route bundle size in a Next.js production build?▼

Next.js per-route bundle analysis parses .next/build-manifest.json and .next/app-build-manifest.json to compute first-load JS, diff against a baseline, and flag oversized imports with remediation guidance.

What is the best way to detect bundle-size regressions before a frontend release?▼

Detect bundle-size regressions by running a pre-release performance sweep that computes per-route first-load JS deltas against a baseline, identifying top offending imports and providing dynamic import or tree-shake suggestions.

How do I find oversized imports causing slow first-load times in Next.js?▼

Find oversized imports by analyzing Next.js build manifests to report per-route first-load JS weights, pinpointing top offenders, and suggesting lighter alternatives or tree-shake configurations to shrink load times.

Does this bundle-size check require external dependencies or build tools?▼

No, the bundle-size check requires no external dependencies or build tools. It operates as a read-only analysis by directly parsing existing Next.js build output manifests like .next/build-manifest.json.

When should I run a Next.js bundle-size analysis to prevent performance regressions?▼

Run a Next.js bundle-size analysis during pre-release performance sweeps, after adding or upgrading frontend dependencies, or when a specific route exceeds the first-load budget to catch regressions.

How does baseline comparison work for Next.js per-route bundle analysis?▼

Baseline comparison for Next.js bundle analysis computes per-route first-load JS from build manifests, diffs the values against the saved baseline, reports the deltas, and flags routes exceeding the budget.

Related Skills

Explore More Software Engineering Skills→
SylphxAISylphxAI
4

i18n

Standardizes Next.js translation workflows with next-intl and build-time validation.

Official
Intermediate
NihaalManafNihaalManaf

vercel-react-best-practices

Apply React/Next.js performance best practices to components, pages, and data fetching.

Community
Advanced
Exia-thdExia-thd

performance-engineer

Profile web applications and generate k6/Artillery load testing scripts.

Community
Advanced
AgentientAgentient
2

frontend-bundle-analysis-and-optimization

Analyze and optimize JavaScript bundle size in Next.js projects.

Official
Advanced