Bundle Size Optimization
This walks you through analyzing and shrinking your JavaScript and CSS bundles using tools like webpack-bundle-analyzer and Source Map Explorer. You'd reach for it when your builds are bloating, before deployments, or after adding dependencies that might have pulled in more than you bargained for. The skill focuses on code splitting, tree shaking, and identifying heavy libraries (the example calls out moment.js eating 67KB). It's most valuable when you're targeting mobile users or slow networks where every kilobyte counts. The reference guides cover the actual optimization techniques, though the quick start is more of a structure overview than working code.
- skills.sh installs
- 567
- GitHub stars
- 379
- last updated
- Aug 21, 2026
Install
$ npx -y skills add aj-geddes/useful-ai-prompts --skill bundle-size-optimization --agent claude-codeInstalls into .claude/skills of the current project.
Files
Bundle Size Optimization
Table of Contents
Overview
Smaller bundles download faster, parse faster, and execute faster, dramatically improving perceived performance especially on slower networks.
When to Use
- Build process optimization
- Bundle analysis before deployment
- Performance baseline improvement
- Mobile performance focus
- After adding new dependencies
Quick Start
Minimal working example:
// Analyze bundle composition
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/aj-geddes/useful-ai-prompts
- Categories
- Frontend Development, AI & Agent Building, Debugging
- First seen
- Jun 3, 2026
More from aj-geddes/useful-ai-prompts
All 258- Process Mapping563
- Oauth Implementation558
- Integration Testing557
- Memory Optimization552
- Semantic Versioning552
- Caching Strategy551
- Real Time Features548
- Web Performance Audit548
- Browser Debugging545
- Mobile Offline Support545
- Design System Creation543
- Gcp Cloud Run541
- Code Generation Template537
- Sql Injection Prevention533
- Grpc Service Development532
- Gap Analysis531
- Network Debugging531
- Payment Gateway Integration529
- Progressive Web App529
- Kpi Dashboard Design528
- Microservices Architecture527
- Sql Query Optimization527
- Security Headers Configuration519
- Prometheus Monitoring516
Recommended
More Frontend Development
nodeops-authnodeops-app/skillsAdd NodeOps PKCE OAuth authentication to a Next.js app. Trigger when the user wants to set up NodeOps login, integrate NodeOps OAuth, add @nodeops-createos/inte564skills.sh installs
expopproenca/dot-skillsExpo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optima561skills.sh installs
wordpress-plugin-corejezweb/claude-skillsBuild secure WordPress plugins with hooks, database interactions, Settings API, custom post types, and REST API. Covers Simple, OOP, and PSR-4 architecture patt560skills.sh installs
creative-mechanicsmotion-team/creative-strategy-skillsA library of creative mechanics — the structural patterns that define how an ad constructs meaning between its hook, visuals, and narrative. Use this whenever d560skills.sh installscreative-strategy-enginemotion-team/creative-strategy-skillsStrategic framework for mapping pain/persona intersections and messaging angles. Defines the structure for organizing creative strategy, not the tactics for exe559skills.sh installs
ocr-super-suryaaktsmm/agent-skillsGPU-optimized OCR using Surya. Use when: (1) Extracting text from images/screenshots, (2) Processing PDFs with embedded images, (3) Multi-language document OCR,558skills.sh installs