WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2025 • Aug 20, 2025 • Session details

A Practical Guide to Reducing Bundle Size

Stephen Cooper

Are TypeScript decorators and barrel exports secretly bloating your web application? Discover how to optimize tree shaking and write minification-friendly code to slash your bundle size by 40%.

Pause
Mute Enter Fullscreen
#1 about 2 min

Overview of component libraries and bundle optimization scope

Context on component library structures and the explicit motivation to shrink payload footprint for faster rendering.

#2 about 2 min

Benefits of reducing client browser bundle size

How smaller client modules improve user experience, reduce parsing execution timeouts, and directly boost web vitals metrics.

#3 about 2 min

Understanding tree shaking concepts in modern bundlers

Exploring the process of dropping unused abstract syntax tree logic branches from finalizing production output.

#4 about 2 min

Risks of module side effects in bundled output

Why unexpected externally visible behaviors or top-level logic prevents tooling from safely removing uncalled module definitions.

#5 about 3 min

Configuring side effect flags for web bundlers

Signaling side-effect-free code execution using explicit package configurations allows engines to drop dead style definitions.

#6 about 2 min

Optimizing pure functions with manual bundler annotations

Marking unattached variables or isolated components as pure enables aggressive elimination of unused complex logic blocks.

#7 about 3 min

Why TypeScript decorators prevent effective tree shaking

Identifying how transpiled configuration decorators leak reference properties that block static analysis tooling from correctly eliminating dependencies.

#8 about 2 min

Avoiding barrel file exports for better dependency isolation

Bypassing global star exports from combined barrel definitions allows compilation interfaces to correctly isolate independent functions.

#9 about 3 min

Integrating bundle size regression testing into pull requests

Tracking overall payload metric changes with continuous integration assertions automatically flags unexpected logic inclusions during code reviews.

#10 about 2 min

Inspecting compiled bundles with visual diagnostic heat maps

Utilizing modern source map visualization panels helps developers immediately diagnose unexpectedly heavy or grouped logic blocks.

#11 about 2 min

Fundamentals of JavaScript minification and internal variable mangling

Stripping execution files of specific semantic descriptors and physical spacing compresses the code text into tiny, functionally identical footprints.

#12 about 4 min

Shrinking module classes with native JavaScript private properties

Adopting the native hash modifier over standard TypeScript restrictions ensures final build processes can safely obscure internal identifiers.

#13 about 5 min

Code restructuring techniques to maximize repeated property minification

Adopting numerical error replacements and explicit inversion injection behaviors drastically scales down identifier repetition in heavily shared architecture components.

Matching moments

2:54 min

Reducing JavaScript bundle sizes with build tools

Shem Magnezi Shem Magnezi · World Congress 2025

5:52 min

Understanding the role of bundlers in tree shaking

Francesco Novy Francesco Novy

4:10 min

Benchmarking execution speed and bundle size across module systems

Jolo Jolo · World Congress 2024

4:18 min

Reducing JavaScript bundle sizes for multiplied carbon savings

Lorenzo Pieri · LIVE

4:29 min

Reducing initial bundle size via dynamic component imports

Eileen Fürstenau Eileen Fürstenau · World Congress 2024

2:00 min

Optimizing bundle sizing using customized Emscripten compilation flags

Paweł Aniszewski Paweł Aniszewski · Europe 2026 Virtual

More from World Congress 2025

GenAI Security: Navigating the Unseen Iceberg thumbnail
24:33
11 months ago

GenAI Security: Navigating the Unseen Iceberg

Maish Saidel-Keesing

Behind the Code: How Women Are Powering the Future of AI thumbnail
30:28
about 1 year ago

Behind the Code: How Women Are Powering the Future of AI

Alexandra Wudel, Laura Moritz, Madalina Florean

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise? thumbnail
28:12
about 1 year ago

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise?

Justus Lumpe, Konstantin Vinogradov, Nils Eiteneyer, Stephan Wirris

AI in Leadership: How Technology is Reshaping Executive Roles thumbnail
28:19
about 1 year ago

AI in Leadership: How Technology is Reshaping Executive Roles

Bernd Datler, Jasmin Kaiser, Jeff Hausmann, Sonja Alvarez

The AI-Ready Stack: Rethinking the Engineering Org of the Future thumbnail
28:09
about 1 year ago

The AI-Ready Stack: Rethinking the Engineering Org of the Future

Alex Laubscher, Jan Oberhauser, Keno Dreßel, Mirko Novakovic

AI Sovereignty: What Does It Take? thumbnail
29:13
about 1 year ago

AI Sovereignty: What Does It Take?

Boris Hecker, Clemens Wasner, Robin Hermann, Sonja Alvarez

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 16:50–17:20

Stage 3

Merging at Scale: From Broken Builds to Green Mainline

Manjari Akella, Preetam Dwivedi

Manjari Akella
Preetam Dwivedi
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 24, 2026 · 13:30–15:30

Stage 10

Hands-On CI Optimization Workshop

Abbe Piels

Member of Technical Staff at Blacksmith

Abbe Piels
Open session

World Congress 2026 North America

September 25, 2026 · 16:00–16:10

Outdoor Stage

public void saveMoney(AI): The Developer's Guide to Unit Economics

Hrushikesh Pokala

Senior Software Engineer Lead at Equifax

Hrushikesh Pokala
Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

Related videos

Tree Shaking the Bytes Away thumbnail
27:40
about 2 years ago

Tree Shaking the Bytes Away

Francesco Novy

How Your Bundle Size Affects The Climate thumbnail
53:16
JS Congress • almost 5 years ago

How Your Bundle Size Affects The Climate

Roy Derks

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Oh CommonJS! Why are you mESMing with me? thumbnail
20:23
World Congress 2024 • about 2 years ago

Oh CommonJS! Why are you mESMing with me?

Jolo

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

Building software that scales with Typescript thumbnail
37:18
World Congress 2022 • about 4 years ago

Building software that scales with Typescript

Tal Joffe

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.