🎨 Frontend Engineering · Web Performance

Put JavaScript bundles on a diet

Analyze, split, and replace dependencies so routes ship only the code they execute.

intermediate~35 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Generate a bundle report; list the ten largest modules per route
2Replace moment/lodash-class imports with native APIs or per-function imports
3Dynamic-import heavy widgets (editors, charts) behind interaction
4Move date/number formatting and markdown parsing server-side where possible
5Set an import lint rule banning known-bloated packages
6Track route-level JS budget over time; investigate any growth spike same week

Common Pitfalls

▲Tree-shaking defeated by side-effectful barrel files
▲Polyfills duplicated by transpilation misconfig

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill web-performance-js-bundle-diet

Install globally

$ npx skills add aniruddhaadak80/skills --skill web-performance-js-bundle-diet -g

Tags

#bundles#performance#dependencies#frontend-engineering#web-performance

Install this skill

$ npx skills add aniruddhaadak80/skills --skill web-performance-js-bundle-diet -a opencode

SKILL.md

# Put JavaScript bundles on a diet

> Analyze, split, and replace dependencies so routes ship only the code they execute.

## When to Use This Skill

Analyze, split, and replace dependencies so routes ship only the code they execute.

## Steps

1. Generate a bundle report; list the ten largest modules per route
2. Replace moment/lodash-class imports with native APIs or per-function imports
3. Dynamic-import heavy widgets (editors, charts) behind interaction
4. Move date/number formatting and markdown parsing server-side where possible
5. Set an import lint rule banning known-bloated packages
6. Track route-level JS budget over time; investigate any growth spike same week

## Common Pitfalls

- Tree-shaking defeated by side-effectful barrel files
- Polyfills duplicated by transpilation misconfig

View source on GitHub ↗

Diagnose LCP, INP, and CLS from field data and apply targeted fixes per metric rather than guessing.

🎨 Frontend Engineering·~45m

Open →

Ship images that cost almost nothingfoundation

Modern formats, responsive sizes, lazy strategies, and priority hints for above-fold heroes.

🎨 Frontend Engineering·~25m