Tree shaking should be used to remove unnecessary code
Often when coding, projects can accumulate clutter and functions that are no longer used (due to newer, more effective features being developed). By utilizing tree shaking techniques, all the "dead wood" will be automatically dropped upon compilation, reducing a file's size.
Criteria: Remove redundancy
Identify and eliminate unused and dead code within CSS and JavaScript.
Resources
- Browser Default Styles
- Coverage: Find unused JavaScript and CSS
- Front-End Performance 2021: Build Optimizations
- How large DOM sizes affect interactivity
- How To Reduce Unused CSS And Speed Up Your Website
- How To Reduce Unused JavaScript
- Reduce JavaScript payloads with tree shaking
- Remove unused CSS
- The cost of not deleting code
- Tree shaking
- Tree-Shaking: A Reference Guide
- Web Almanac: Sustainability
- Who Killed My Battery: Analyzing Mobile Browser Energy Consumption (PDF)
Impact: Medium, Effort: Medium
| GRI | Impact |
|---|---|
| materials | Medium |
| energy | Medium |
| water | Medium |
| emissions | Medium |
Benefits of this guideline
- Environment: Removal of unused code eliminates wasted bytes from the rendering tree, which means less wasted download and potential processing time (which can be a battery-draining process).
- Performance: Unused code will not impact visitors, yet it takes up space in the cache, RAM, and takes extra time to download and render. Clearing wasted space frees' visitor resources.
- Economic: Unused code has a maintenance cost as it might affect other code, additionally, it's something else for developers to have to deal with unnecessarily.
Example
-
codeexport function read(props) { return props.book } import { read } from 'utilities'; eventHandler = (e) => { read({ book: e.target.value })} -
contentTree Shaking.
Tags:
- CSS
- JavaScript
- Performance