Explain the concept of 'bundling' in Webpack and how it impacts web performance.

We have a small React app where the initial page load is really slow because the main.js file is 5MB. If you open up the network tab, how would you figure out what's making this bundle so huge, and what's the first change you'd make in your code to split it up?

Imagine you just imported a heavy charting library like D3 into a single component that's only visible on an admin dashboard. Right now, it's bloating the bundle for everyone on the homepage. How would you change how you import D3 so it only loads when the user actually navigates to that admin page?

You notice that every time you make a one-line CSS change and redeploy, your users have to re-download the entire 2MB JavaScript bundle. How would you configure Webpack's output filenames to make sure users can cache the JS bundle while still getting the new CSS?

We recently upgraded a third-party utility library, and our production bundle size spiked by 400KB, even though we only use one function from it. It looks like tree-shaking stopped working for this package. How would you debug why Webpack is suddenly bundling the entire library, and what configuration or import changes would you look at?

Our team is debating our code-splitting strategy. One developer wants to split every single route into its own chunk, while another thinks we should just have one vendor bundle and one app bundle. What are the performance and caching trade-offs of these two approaches, and how would you decide on the right balance?

You're looking at a Webpack Bundle Analyzer report and notice that a common utility helper is being duplicated and compiled into three different lazy-loaded route chunks. Why is Webpack duplicating this code instead of sharing it, and how would you configure optimization.splitChunks to fix it?

We run a large-scale SaaS platform with micro-frontends. We're hitting a wall where our shared Webpack configurations are causing version mismatches and massive duplicate dependency downloads across teams. How would you design a bundling and sharing strategy—perhaps using Module Federation—to solve this without sacrificing independent deployments?

Our CI/CD build times have crept up to 15 minutes, mostly spent in the Webpack compilation and minification phases. Walk me through how you would audit this build pipeline. What specific plugins, loaders, or caching strategies would you introduce to bring this build time down under 3 minutes?

We are migrating a legacy multi-page application (MPA) to a single-page application (SPA). The MPA currently relies on global scripts loaded via CDN. How would you architect the Webpack entry points and chunking strategy to ensure we don't break legacy pages while incrementally moving users to the new bundled SPA?

Our enterprise frontend monorepo has over 200 developers and 50+ independent applications. Webpack's build performance and configuration complexity have become a major developer friction point. How would you evaluate whether to migrate the entire organization to a modern tool like Vite or Turbopack versus optimizing our existing Webpack setup, and how would you manage that migration risk across teams?

We are designing a high-traffic e-commerce site where Core Web Vitals (specifically LCP and INP) directly impact revenue. How would you architect a comprehensive bundling, prefetching, and caching strategy that balances immediate interactivity on slow mobile networks with seamless subsequent page transitions?