How would you design a code splitting strategy for a large React SPA to minimise initial bundle, optimise chunk reuse, and avoid waterfall loading on navigation?

Question

Accepted Answer

Imagine you have a giant coloring book with many pages. Instead of carrying the whole book everywhere, you tear out only the pages you need for today. Code splitting is like that: your app sends only the parts you need right now, so it loads fast.

How would you design a code splitting strategy for a large React SPA to minimise initial bundle, optimise chunk reuse, and avoid waterfall loading on navigation?

Diagram

Go deeper

More Frontend System Design questions