Bundle Size Optimization

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Reduce JavaScript and CSS bundle sizes through code splitting, tree shaking, and optimization techniques. Improve load times and overall application performance.

Instructions onlySoftware Development
AI-generated overview

Guides reducing JavaScript and CSS bundle sizes via code splitting, tree shaking and analysis.

What it does
This skill provides guidance for shrinking JavaScript and CSS bundles using code splitting, tree shaking and other optimization techniques. It covers analyzing bundle composition with tools such as webpack-bundle-analyzer and Source Map Explorer, interpreting size metrics, and applying an implementation strategy. Supporting reference documents and a component template are included, but no scripts are shipped.
When to use it
Use it when optimizing a build process, analyzing bundles before deployment, improving a performance baseline, focusing on mobile performance, or after adding new dependencies.
Requirements
No scripts or runtime dependencies; it is instructions and reference documents only. Bundle analysis tools such as webpack-bundle-analyzer, Source Map Explorer, Bundle Buddy and Bundlephobia are discussed but not required to run the skill.

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:

javascript
// Analyze bundle composition
class BundleAnalysis {  analyzeBundle() {    return {      tools: [        "webpack-bundle-analyzer",        "Source Map Explorer",        "Bundle Buddy",        "Bundlephobia",      ],      metrics: {        total_size: "850KB gzipped",        main_js: "450KB",        main_css: "120KB",        vendor: "250KB",        largest_lib: "moment.js (67KB)",      },      breakdown: {        react: "85KB (10%)",        lodash: "45KB (5%)",        moment: "67KB (8%)",        other: "653KB (77%)",      },    };// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

GuideContents
Bundle Analysis [blocked]Bundle Analysis
Optimization Techniques [blocked]Optimization Techniques
Implementation Strategy [blocked]Implementation Strategy
Best Practices [blocked]Best Practices

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/bundle-size-optimizationat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal