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.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

Understanding tree shaking and dead code elimination
01:27 MIN

Understanding tree shaking and dead code elimination

A Practical Guide to Reducing Bundle Size

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Executing JavaScript and optimizing the bundle
03:05 MIN

Executing JavaScript and optimizing the bundle

The Journey of a Pixel in a React Application

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Reducing JavaScript's impact with smaller bundles
04:21 MIN

Reducing JavaScript's impact with smaller bundles

Sustainable me. A tale of good design.

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Reducing bundle size by replacing heavy dependencies
03:06 MIN

Reducing bundle size by replacing heavy dependencies

Challenges of building React and React Native apps

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
How production builds remain highly optimized
05:01 MIN

How production builds remain highly optimized

The Eternal Sunshine of the Zero Build Pipeline

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
The importance of testing your bundle size
02:11 MIN

The importance of testing your bundle size

A Practical Guide to Reducing Bundle Size

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
How bundling reveals ESM's performance advantage
01:39 MIN

How bundling reveals ESM's performance advantage

Oh CommonJS! Why are you mESMing with me?

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
The two primary approaches for improving frontend performance
01:57 MIN

The two primary approaches for improving frontend performance

To New Frontiers: The Future of Frontend Development

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

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

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

Let's build a VS Code extension for automated refactorings

Nicolas Carlo

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

How a Small Team Shrank a Microsoft Monorepo by 94%

Jonathan Creamer

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

Things I learned while writing high-performance JavaScript applications

Michele Riva

Related Articles

View all articles
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine
Dev Digest 113 - Debugging above the cloud
Hello there and welcome to Dev Digest 113! This time, we got an old friend in the sky back, jQuery asks us to upgrade and AI is eating the web. Also, are you sure the LLM you use is secure against code injection?News and ArticlesGood news everyone! N...
Dev Digest 113 - Debugging above the cloud

From learning to earning

Jobs that call for the skills explored in this talk.