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

tree-IT GmbH
Bad Neustadt an der Saale, Germany

€54-80K
Intermediate
Senior
Java
TypeScript
+1

Angular Developer

Picnic Technologies B.V.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Scripting presentations and demos in VS Code
14:14 MIN

Scripting presentations and demos in VS Code

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The emerging market for fixing AI-generated code
04:09 MIN

The emerging market for fixing AI-generated code

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Comparing software maintenance to tattoo cover-ups
07:27 MIN

Comparing software maintenance to tattoo cover-ups

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Why small companies shouldn't copy big tech processes
03:10 MIN

Why small companies shouldn't copy big tech processes

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

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

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

Let's build a VS Code extension for automated refactorings

Nicolas Carlo

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

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
DC
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos
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

From learning to earning

Jobs that call for the skills explored in this talk.