agentsclimarketplace

Bundle size

Skill Amey-Thakur/AI-SKILLS/skills/performance/bundle-size

Plug-and-play skills and prompts for every AI coding agent

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill bundle-size

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 18 days oldThe repository was created 18 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.5 KB, as published. Nobody here has run it

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

  1. 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?

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.