Before:

After:

Source maps work. Just need to run npm run prebuild to get them triggered and you can debug inside CardsCarousel.jsx

Also can code split css. We just need to import the CSS from the JS, co-locate the files together and webpack will be able to smartly load/bundle them together.

We can decide if we want to do giant bundle releases or individual chunks (or roll them out slowly) but the upside to this is we only need to release chunks of things at a time and not the entire app if only a small part changes. Becomes truly modular. We need to research if any downsides but we can do this migration piece at a time.

Can also lazy load third party dependencies on an add needed basis. Webpack automatically deduplicates modules, so you won’t end up shipping immer twice even if multiple files import it. Here’s how it works in practice:

const LazyImmer = React.lazy(() =>
  import(
    /* webpackChunkName: "immer-vendor" */
    'immer'
  )
);