skills.rest
cenjie
cenjieCOMMUNITY
Explore all skills by this author →
GitHub

bundle-size-optimization

Analyze JavaScript and CSS bundles to identify code-splitting and tree-shaking opportunities.

Updated May 17, 2026
Search Tags:#performance#webpack#tree-shaking#code-splitting#bundle-analysis#bundle-optimization#bundle-budget
One-click install
npx skills add https://github.com/cenjie/skills --skill bundle-size-optimization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bundle-size-optimization
Source: https://github.com/cenjie/skills/tree/main/skills/bundle-size-optimization
Command: npx skills add https://github.com/cenjie/skills --skill bundle-size-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams reduce JavaScript and CSS bundle sizes to improve page load times, parsing, and execution, especially for users on slow networks or mobile devices. It translates analysis into targeted optimizations that reduce payload, improve caching, and lower time-to-interactive.

Core Features & Use Cases

  • Bundle Analysis: Identify large modules, duplicate dependencies, and unused code using analyzer tools and source maps.
  • Optimization Techniques: Recommendations for code splitting, tree shaking, minification, dependency replacement, and dynamic imports.
  • Implementation Strategy: Stepwise plan to run quick wins, implement route- and component-level splitting, and integrate bundle budgets into CI pipelines.
  • Use Case: Analyze a web app before release to split vendor code, lazy-load heavy components, and meet gzipped size targets for faster mobile performance.

Quick Start

Analyze the project's bundles to identify code-splitting, tree-shaking, and dependency-removal opportunities and produce a prioritized optimization plan.

Frequently Asked Questions about bundle-size-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce JavaScript and CSS bundle sizes for faster page loads?▼

Reduce JavaScript and CSS bundle sizes by analyzing large modules with bundle analyzers, then applying code splitting, tree shaking, and minification to improve download, parse, and execution performance.

What is the best way to identify duplicate dependencies and unused code in my web app?▼

Identify duplicate dependencies and unused code by running bundle analysis tools with source maps to inspect your build output, revealing large modules that can be removed or replaced.

How do I enforce gzipped size targets and bundle budgets in my CI pipeline?▼

Enforce gzipped size targets and bundle budgets by integrating bundle analyzer checks into your CI pipeline, ensuring releases fail when bundles exceed configured performance baselines.

Does bundle optimization work for mobile optimization during release cycles?▼

Bundle optimization is effective for mobile optimization during build and release cycles, reducing payload and lowering time-to-interactive for users on slow networks or mobile devices.

How do I implement route-level and component-level code splitting?▼

Implement route-level and component-level code splitting by applying dynamic imports and vendor separation in a stepwise plan, starting with quick wins before lazy-loading heavy components.

When should I not use tree shaking for bundle optimization?▼

Tree shaking may not work as expected when modules contain side effects, preventing unused code elimination. Analyze your bundle source maps to verify tree shaking effectiveness before release.

Related Skills

Explore More Software Engineering Skills→
airRnot1106airRnot1106

next-bundle-analyzer

Analyze Next.js 16 Turbopack bundle sizes and detect duplicate modules.

Community
Intermediate
OysteinAmundsenOysteinAmundsen
48

bundle-check

Validate @toolbox-web/grid index.js bundle size against raw and gzipped limits.

Community
Intermediate
Kinfe123Kinfe123
35

build-pipelines-bundling

Explains bundling, code splitting, tree shaking for Webpack, Vite, esbuild.

Community
Advanced
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced