Francesco Novy

Tree Shaking the Bytes Away

How does the way you write code impact your final bundle size? Learn two powerful techniques to make your JavaScript more tree-shakeable.

Tree Shaking the Bytes Away
#1about 2 minutes

Understanding tree shaking to remove unused code

Tree shaking is a process used by bundlers to automatically remove unused code, also known as dead code, from your final application build.

#2about 4 minutes

How bundlers work and why they are necessary

Bundlers are essential for optimizing browser applications by combining code into a single file and enabling tree shaking, unlike native browser imports which load entire modules.

#3about 4 minutes

How static analysis enables code removal

Bundlers use static analysis at build time to create a dependency graph and identify unused code, but they cannot account for dynamic, runtime conditions.

#4about 3 minutes

How to test and measure tree shaking effectiveness

Use the `size-limit` NPM package to create test scenarios that measure bundle size impact and integrate these checks into CI to prevent regressions.

#5about 5 minutes

Using composition over options for better tree shaking

Refactor code from an options-based approach to a composition pattern to ensure optional features and their dependencies can be completely tree-shaken away.

#6about 4 minutes

Using static build flags for build-time optimization

Implement magic strings that are replaced with boolean values at build time, allowing the bundler to remove entire code blocks like debug logs for production builds.

#7about 4 minutes

Q&A on barrel files and build environment differences

The Q&A covers how barrel files can complicate tree shaking and the potential risks of having different development and production builds due to build-time flags.

Related jobs
Jobs that call for the skills explored in this talk.

Software Engineer

tree-IT GmbH
Bad Neustadt an der Saale, Germany

Remote
Intermediate
Senior

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Matching moments

Understanding tree shaking and dead code elimination
03:18 MIN

Understanding tree shaking and dead code elimination

A Practical Guide to Reducing Bundle Size

Reducing bundle size by replacing heavy dependencies
07:02 MIN

Reducing bundle size by replacing heavy dependencies

Challenges of building React and React Native apps

How production builds remain highly optimized
38:47 MIN

How production builds remain highly optimized

The Eternal Sunshine of the Zero Build Pipeline

The importance of testing your bundle size
14:13 MIN

The importance of testing your bundle size

A Practical Guide to Reducing Bundle Size

How bundling reveals ESM's performance advantage
12:57 MIN

How bundling reveals ESM's performance advantage

Oh CommonJS! Why are you mESMing with me?

Executing JavaScript and optimizing the bundle
15:20 MIN

Executing JavaScript and optimizing the bundle

The Journey of a Pixel in a React Application

Reducing JavaScript's impact with smaller bundles
22:32 MIN

Reducing JavaScript's impact with smaller bundles

Sustainable me. A tale of good design.

Avoiding barrel files to improve tree shaking
13:04 MIN

Avoiding barrel files to improve tree shaking

A Practical Guide to Reducing Bundle Size

Featured Partners

Related Videos

See all videos
A Practical Guide to Reducing Bundle Size26:20

A Practical Guide to Reducing Bundle Size

Stephen Cooper

The Eternal Sunshine of the Zero Build Pipeline50:10

The Eternal Sunshine of the Zero Build Pipeline

M4dz

How Your Bundle Size Affects The Climate53:16

How Your Bundle Size Affects The Climate

Roy Derks

The Lean Web46:46

The Lean Web

Chris Ferdinandi

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

How a Small Team Shrank a Microsoft Monorepo by 94%33:23

How a Small Team Shrank a Microsoft Monorepo by 94%

Jonathan Creamer

Let's build a VS Code extension for automated refactorings1:40:08

Let's build a VS Code extension for automated refactorings

Nicolas Carlo

Things I learned while writing high-performance JavaScript applications27:27

Things I learned while writing high-performance JavaScript applications

Michele Riva

From learning to earning

Jobs that call for the skills explored in this talk.

Lead Full-Stack Engineer

Lead Full-Stack Engineer

Hubert Burda Media
München, Germany

€80-95K
Intermediate
Senior
React
Vue.js
Node.js
MongoDB
+1