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

Matching moments

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

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

Using AI to overcome challenges in systems programming
02:49 MIN

Using AI to overcome challenges in systems programming

AI in the Open and in Browsers - Tarek Ziadé

Technical challenges of shipping a cross-platform browser
09:38 MIN

Technical challenges of shipping a cross-platform browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

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.