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