How do I install the Bundle Size skill?

Run npx skillmds@latest add amey-thakur/bundle-size in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Bundle Size safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Bundle Size?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Bundle Size free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Bundle Size?

Amey-Thakur (@amey-thakur) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Bundle Size by amey-thakur — Agent Skill

Name: Bundle Size
Author: Amey-Thakur

Bundle Size

Shrink JavaScript bundles by analyzing what ships, enabling real tree shaking, splitting heavy code, and putting the dependency list on a diet. Use when the initial JS payload is large, slow to parse, or growing unchecked.

Amey-Thakur 0689e0f 2.5 KB Updated Sep 17, 2026

File contents

Bundle size

A JavaScript bundle is code the browser must download, parse, and execute before the page becomes usable, and it accretes weight silently as dependencies pile up. Nobody adds a megabyte on purpose: it arrives one convenient import at a time. Shrink it by seeing what is inside, removing what is dead, and choosing lighter dependencies.

Method

Visualize what is in the bundle. Run source-map-explorer, webpack-bundle-analyzer, or Rollup's visualizer plugin. Find the biggest modules and the surprises: a date library, an entire icon set, the same package bundled twice.
Enable and verify tree shaking. Ship ES modules rather than CommonJS, mark "sideEffects": false where it holds, and build in production mode. Import named exports (import { debounce }) instead of the whole namespace so the bundler can drop what you do not use.
Put heavy, rarely used code behind a dynamic import. Code-split routes and large widgets, a charting library or a rich-text editor, with import() so they load on demand instead of riding in the initial bundle.
Put the dependencies on a diet. Replace moment with date-fns or Temporal, swap all of lodash for per-method imports or native equivalents, and pull only the components you use from a large UI library. Check the cost on Bundlephobia before adding anything.
Dedupe transitive bloat. Several versions of one package inflate the bundle. Run npm dedupe, inspect the lockfile, and collapse to a single copy with resolutions or overrides.
Set a budget and enforce it in CI. Add a size-limit or bundlesize check that fails the build when the payload crosses a threshold. Without a gate, the weight you removed creeps back every sprint.

Signals

Does a bundle-analyzer report exist, or is the size a mystery?
Does importing one function pull in an entire library?
Is heavy, optional code split out of the initial download?
Does CI fail when the bundle exceeds its budget?

Boundaries

The one-time cost of a server or CLI process booting is startup-time; the main-thread cost during interaction is web-vitals' INP. This skill covers what ships in the JavaScript payload. Framework-specific splitting defers to the framework's build configuration.

---name: bundle-sizedescription: Shrink JavaScript bundles by analyzing what ships, enabling real tree shaking, splitting heavy code, and putting the dependency list on a diet. Use when the initial JS payload is large, slow to parse, or growing unchecked.---# Bundle sizeA JavaScript bundle is code the browser must download, parse, and execute beforethe page becomes usable, and it accretes weight silently as dependencies pileup. Nobody adds a megabyte on purpose: it arrives one convenient import at atime. Shrink it by seeing what is inside, removing what is dead, and choosinglighter dependencies.## Method1. **Visualize what is in the bundle.** Run `source-map-explorer`, `webpack-bundle-analyzer`, or Rollup's visualizer plugin. Find the biggest modules and the surprises: a date library, an entire icon set, the same package bundled twice.2. **Enable and verify tree shaking.** Ship ES modules rather than CommonJS, mark `"sideEffects": false` where it holds, and build in production mode. Import named exports (`import { debounce }`) instead of the whole namespace so the bundler can drop what you do not use.3. **Put heavy, rarely used code behind a dynamic import.** Code-split routes and large widgets, a charting library or a rich-text editor, with `import()` so they load on demand instead of riding in the initial bundle.4. **Put the dependencies on a diet.** Replace `moment` with `date-fns` or `Temporal`, swap all of `lodash` for per-method imports or native equivalents, and pull only the components you use from a large UI library. Check the cost on Bundlephobia before adding anything.5. **Dedupe transitive bloat.** Several versions of one package inflate the bundle. Run `npm dedupe`, inspect the lockfile, and collapse to a single copy with `resolutions` or `overrides`.6. **Set a budget and enforce it in CI.** Add a `size-limit` or `bundlesize` check that fails the build when the payload crosses a threshold. Without a gate, the weight you removed creeps back every sprint.## Signals- Does a bundle-analyzer report exist, or is the size a mystery?- Does importing one function pull in an entire library?- Is heavy, optional code split out of the initial download?- Does CI fail when the bundle exceeds its budget?## BoundariesThe one-time cost of a server or CLI process booting is startup-time; themain-thread cost during interaction is web-vitals' INP. This skill covers whatships in the JavaScript payload. Framework-specific splitting defers to theframework's build configuration.

Frequently asked questions