tree-shaking

SKILL.md

Tree Shaking

It can happen that we add code to our bundle that isn't used anywhere in our application. This piece of dead code can be eliminated in order to reduce the size of the bundle, and prevent unnecessarily loading more data! The process of eliminating dead code before adding it to our bundle, is called tree-shaking.

When to Use

Use this when your bundle includes unused code from imported modules

This is helpful for keeping JavaScript bundles lean and improving load performance

Instructions

Use ES2015 import/export syntax — only ES modules can be tree-shaken

Use named imports instead of importing entire modules to enable effective tree-shaking

Mark packages as side-effect-free in package.json when appropriate

Be aware that modules with side effects cannot be safely tree-shaken

Details

Concepts