From grimoire
Audits JavaScript bundle size to reduce parse/compile time and improve TTI. Covers tree-shaking, code-splitting, and budget enforcement with tools like webpack-bundle-analyzer.
How this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:audit-bundle-sizeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Identify and eliminate excess JavaScript to reduce parse/compile time and reach interactive state faster.
Identify and eliminate excess JavaScript to reduce parse/compile time and reach interactive state faster.
Adopted by: Google's web.dev performance curriculum; Vercel and Next.js built-in bundle analyzer; Create React App and Vite expose bundle analysis tooling by default
Impact: Addy Osmani (Google) documented that 1MB of JavaScript takes 8 seconds to parse on a median mobile device; Google's CrUX data shows JavaScript parse time is the leading cause of poor INP and TTI on mobile
Why best: JavaScript is the most expensive resource per byte on the web: it must be downloaded, parsed, compiled, and executed before it produces value. Images of equivalent size are far cheaper because they only require decoding. Every KB of JavaScript removed improves TTI on low-end devices disproportionately.
npx webpack-bundle-analyzer or npx vite-bundle-visualizer; for Next.js, use @next/bundle-analyzer; identify the largest modules by parsed size (not gzip size)date-fns instead of moment)index.js re-exporting everything) defeat tree shakingReact.lazy + Suspense; in Next.js: automatic per-page splitting plus dynamic()@babel/preset-env targets; polyfills for ES2018+ features are unnecessary if browserslist excludes IE11; use useBuiltIns: 'usage' not entrybundlesize or Lighthouse CI to the CI pipeline; fail builds where main bundle exceeds budget (e.g., 150KB gzip for initial JS)import _ from 'lodash' includes 70KB; import debounce from 'lodash/debounce' includes 2KBFinding: moment.js appears at 67KB gzip in the bundle; only moment().format() is used.
Fix: Replace with date-fns/format (2KB gzip). Net saving: 65KB. On a median Android device, this saves ~2.5 seconds of JS execution.
<link rel="prefetch"> on likely-next routes can make navigation feel slower, not fasternpx claudepluginhub jeffreytse/grimoire --plugin grimoireGenerates bundle visualizations, analyzes chunk composition, enforces size budgets in CI, evaluates dependency cost before installing, and tracks bundle size over time.
Analyzes and reduces frontend bundle sizes using webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer. Guides tree-shaking, code splitting, lazy loading for large bundles.
Audits frontend bundle size and performance by detecting build tools, running production builds, and analyzing output. Reports gzipped sizes, large chunks, and heavy dependencies with lighter alternatives.