tree-shaking
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/exportsyntax — 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.jsonwhen appropriate - Be aware that modules with side effects cannot be safely tree-shaken
Details
Concepts
More from patternsdev/skills
react-render-optimization
Teaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoization, improving state design, or diagnosing React performance issues.
411compound-pattern
Teaches the compound component pattern for shared implicit state. Use when building related components like tabs, accordions, or dropdowns that need to coordinate without explicit prop passing.
401presentational-container-pattern
Teaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and business logic from UI rendering for better testability and reuse.
395client-side-rendering
Teaches client-side rendering (CSR) for React applications. Use when building highly interactive apps where SEO is not a priority and the UI is driven by user actions.
391render-props-pattern
Teaches the render props pattern for flexible component composition. Use when you need to share rendering logic between components by passing a function that returns JSX as a prop.
385virtual-lists
Teaches virtual list (windowing) techniques for rendering large datasets. Use when rendering lists or tables with hundreds or thousands of items that cause scroll jank or slow initial render.
372