BBC Online shares how they redesigned their Webpack code splitting strategy after core bundles grew beyond 1MB combined size.
•The original strategy used a small set of core bundles (vendor, framework, GEL, website, base-website) shared across all pages, plus per-container bundles for page-specific code.
•As more BBC products moved onto the Presentation Layer, infrequently used libraries like games-atlas, @optimizely, and date-fns inflated the shared vendor bundle unnecessarily.
•Moving games-atlas and @optimizely into a single optionalVendors bundle still forced co-download of unrelated code, so each was split into its own separate async bundle instead.
•Separating games-atlas, @optimizely, and date-fns/date-fns-tz into independent bundles trimmed ~80KB (gzipped) from defaultVendors — a 44% reduction.
•Webpack automatically split @optimizely into sync and async parts since some of its code is required on initial page load, which was accepted as a reasonable trade-off.
BBC Product & Technology - Medium