How to Optimize Bundle Sizes in Single Page Applications (SPAs)
Designed for Mid-level JavaScript SPA developers who own production deployments and want to improve web performance but struggle to identify and reduce bundle bloat. to spark real collaboration and high-energy learning.
A 90-minute virtual workshop using interactive breakout tools. Participants are tech-savvy, motivated, and responsible for shipping performant SPAs, but often feel overwhelmed by dependency complexity, legacy code, and the trade-offs between development speed and performance.
Bundle Jenga Surprise
Kick off by displaying a Jenga tower built from colored blocks—each layer labeled with a popular JS library or feature (e.g., 'Moment.js', 'Chart.js', 'App core'). Ask which pieces, if removed, would make the tower topple, drawing a parallel to unnecessary code in bundles.
Tap to view the full activity.
Why this works
Physical metaphors activate prior knowledge and curiosity, making invisible software concepts tangible and engaging.
Debunk the Tree-Shaking Myth
Present a poll: 'True or False—Modern bundlers always eliminate unused code from node_modules.' After participants vote, walk through a real example where tree-shaking fails (e.g., a non-ESM library included in a Webpack build).
Tap to view the full activity.
Why this works
Revealing misconceptions creates cognitive dissonance, motivating learners to unlearn and reframe their understanding.
Dependency Hot-or-Not
Share a short list of five real package.json dependencies (e.g., lodash, axios, moment, left-pad, react-helmet). In chat or on a Miro board, ask each participant to quickly emoji-rate '🔥' (frequent, justified) or '🧊' (rare, could be replaced/removed).
Tap to view the full activity.
Why this works
Low-pressure, fast participation ensures everyone interacts early without risk, building inclusion and psychological safety.
Bundle Size Showdown
Host a rapid-fire challenge: screen share two anonymized Webpack Bundle Analyzer treemaps (one is optimized, one is not). Split the group into breakout teams. Each team has 3 minutes to list what they’d fix first and why. Quick debrief to compare approaches.
Tap to view the full activity.
Why this works
Gamified, time-limited tasks drive focus, healthy competition, and rapid synthesis of concepts in a fun, social format.
Performance vs. Feature Dilemma
Pose a real-world scenario: 'Your team wants to add a full-featured charting library for one dashboard, but it doubles the initial bundle. What do you do?' Facilitate a group debate over performance, user value, and possible compromise solutions.
Tap to view the full activity.
Why this works
Dilemmas force learners to grapple with trade-offs and defend decisions, deepening understanding of both technical and business stakes.
Bundle Size Commitment Pledge
Wrap up with a quick journaling exercise: Ask everyone to write and share (in chat or post-it) one bundle optimization practice they will apply in their next sprint, and one habit they’ll avoid (e.g., 'I will check bundle-analyzer before merge,' 'I’ll stop importing all of lodash').
Tap to view the full activity.
Why this works
Active reflection and public commitment increase the transfer of workshop insights to real projects, driving accountability and lasting change.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.