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.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related 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.