tree-shaking

Eliminate dead code from JavaScript bundles using ES module imports.

235|25|Updated Mar 24, 2026

Search Tags:#javascript #webpack #rollup #tree-shaking #dead-code #bundle-size #es-modules

Ready to run

npx skills add https://github.com/PatternsDev/skills --skill tree-shaking

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tree-shaking
Source: https://github.com/PatternsDev/skills/tree/main/javascript/tree-shaking
Command: npx skills add https://github.com/PatternsDev/skills --skill tree-shaking

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tree shaking eliminates dead code from JavaScript bundles, reducing bundle size and improving load performance.

Core Features & Use Cases

ES module-based imports and exports enable effective tree shaking.
Identify and remove unused exports to minimize bundle payload in modern web apps.
Provide guidance for marking packages as side-effect-free to maximize elimination.

Quick Start

Configure your bundler to enable tree shaking by using ES modules and named imports.

Frequently Asked Questions about tree-shaking

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

FAQPage Schema

How do I eliminate dead code to shrink JavaScript bundle size?▼

To eliminate dead code and shrink JavaScript bundle size, use ES2015 import/export syntax and configure your bundler to support tree shaking. Import only what you need and mark side-effect-free packages to maximize unused export removal.

What is tree shaking and how does it reduce bundle payload?▼

Tree shaking is a technique that eliminates dead code from JavaScript bundles to reduce bundle size and improve load performance. It works by identifying and removing unused exports in modern front-end applications using ES modules.

Does tree shaking work with CommonJS or do I need ES modules?▼

Tree shaking requires ES2015 import/export syntax to function effectively. You must use ES modules rather than CommonJS, because the static structure of ES module imports and exports enables bundlers to detect and remove unused code.

How do I configure Webpack or Rollup for tree shaking?▼

Configure Webpack or Rollup for tree shaking by using ES modules and named imports in your code. Ensure your bundler configuration supports tree shaking, and mark packages as side-effect-free so the bundler can safely remove unused exports.

Why does tree shaking not remove unused code from my packages?▼

Tree shaking fails to remove unused code when packages are not marked as side-effect-free. Without this designation, bundlers must preserve all exports to avoid breaking hidden side effects, preventing dead code elimination and leaving the bundle size unchanged.

What's the best way to reduce bundle size for modern web apps?▼

The best way to reduce bundle size for modern web apps is applying tree shaking by importing only what you need and marking side-effect-free packages. This eliminates dead code from JavaScript bundles to improve load performance.