How Your Webpack Bundle Is Shipping Unused SVG Icons

Lucas and Luna uncover a common performance drag in modern web apps: shipping entire icon libraries — often hundreds of SVGs — when only a handful are used. They trace the issue from webpack bundling defaults to tree-shaking failures, using Material Icons and Font Awesome as concrete examples. They show how a typical React app with a 20-icon menu still bundles 2,500+ unused SVGs, adding 150KB to the initial load. The episode explores automated solutions: icon subsetting with SVGO-based build plugins, dynamic imports with icon-loading strategies, and lint rules that flag unused icon imports. Listeners learn one specific fix they can apply today to shave seconds off their Lighthouse performance score and reduce bandwidth by 30 percent. #WebPerformance #Webpack #SVG #IconBundles #TreeShaking #BundleSize #FrontendOptimization #MaterialIcons #FontAwesome #SVGO #Lighthouse #React #BuildTools #Technology #WebDev #FexingoBusiness #BusinessPodcast #Fexingo Keep every episode free: buymeacoffee.com/fexingo