3.4 Apply Tree Shaking To Code

Web Development

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.

Impact

Medium

Effort

Medium

Benefits

• Environmental:
  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.

GRI

• materials: Medium
• energy: Medium
• water: Medium
• emissions: Medium

Example

• Code:

  export function read(props) { return props.book }
  import { read } from 'utilities';
  eventHandler = (e) => { read({ book: e.target.value })}

• Tree Shaking.

Resources

• Browser Default Styles
• Coverage: Find unused JavaScript and CSS
• Front-End Performance 2021: Build Optimizations
• How large DOM sizes affect interactivity
• 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)

View the Guideline

Tags

PerformanceCSSJavaScript