Stephen Cooper
A Practical Guide to Reducing Bundle Size
#1about 3 minutes
Why bundle size is important for user experience
Reducing bundle size leads to faster load times and a better user experience, which can also improve SEO rankings through better web vitals.
#2about 1 minute
Understanding tree shaking and dead code elimination
Tree shaking is a form of dead code elimination that removes unused code from the final bundle by analyzing the application's import graph.
#3about 4 minutes
Managing side effects to enable tree shaking
Bundlers avoid removing code with potential side effects, but you can use the `sideEffects: false` property in `package.json` to signal that unused imports are safe to drop.
#4about 2 minutes
Using pure annotations for advanced tree shaking
The `/*#__PURE__*/` annotation tells the bundler that a function call is side-effect-free, allowing it to be removed if its return value is unused.
#5about 3 minutes
How decorators and static properties break tree shaking
Code patterns like decorators and static class properties can create top-level references that prevent bundlers from identifying and removing unused code.
#6about 1 minute
Avoiding barrel files to improve tree shaking
Re-exporting modules from a single "barrel" file (`index.js`) can prevent tree shaking because it forces the bundler to evaluate all exports.
#7about 2 minutes
The importance of testing your bundle size
Small code changes can unexpectedly break tree shaking, so it's crucial to continuously test bundle size using tools like `size-limit` in your CI/CD pipeline.
#8about 1 minute
Debugging bundle size with source map explorer
When tests fail, tools like `source-map-explorer` and `sonder` help visualize the contents of your bundle to identify what code is being incorrectly included.
#9about 2 minutes
How class properties can prevent minification
Minifiers cannot shorten public or TypeScript-private class property names because they could be accessed externally, preserving their full string length in the bundle.
#10about 2 minutes
Using native private fields for better minification
Using native JavaScript private fields (with `#`) allows minifiers to safely mangle property names, but requires targeting modern ES versions to avoid polyfills.
#11about 4 minutes
Advanced patterns for optimizing minification
Further reduce bundle size by replacing verbose error messages with codes, passing class properties as function arguments, and inlining temporary variables.
#12about 1 minute
Comparing build tools and compression methods
The choice of build tool involves a trade-off between build speed and final bundle size, and selecting a modern compression algorithm like Brotli can provide additional savings.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
Tree Shaking the Bytes Away
Francesco Novy
How Your Bundle Size Affects The Climate
Roy Derks
The Eternal Sunshine of the Zero Build Pipeline
M4dz
The Lean Web
Chris Ferdinandi
10 must-know design patterns for JS Devs
Erick Wendel
The Dependency Cookbook - Recipes for Micro Frontend success
Lucas Braeschke, Stefan Bley
Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular
Manfred Steyer
Angular tips/tricks you can use from tomorrow on
Benedikt Starzengruber
From learning to earning
Jobs that call for the skills explored in this talk.
Passionate Javascript developer
Edjuster
Municipality of Madrid, Spain
Remote
React
Node.js
JavaScript
Extreme Programming (XP)
Fullstack developer (Node.js/TypeScript + React + AWS)
PRAGMATIKE
Municipality of Madrid, Spain
Remote
REST
NoSQL
React
Node.js
+3
Software Architect (Contractor) - Composable Commerce & Event-Driven Design
CobbleWeb
Birmingham, United Kingdom
Remote
€61K
Redis
React
Node.js
+4
Web Developer - Node / Typescript / HTML / SCSS / Liquid / Shopify
Codext GmbH
Ilshofen-Vellberg, Germany
€40K
CSS
HTML
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Canton of Montpellier-3, France
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Paris, France
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Canton of Bordeaux-2, France
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Canton de Grenoble-2, France
Remote
REST
Docker
Node.js
JavaScript
+1




