Bundle your components into chunks using React.lazy. Let's say you have a folder with several components, A, B, and C, D which should be bundled together.

react-lazy.js

// Assuming A through D are all regular React component declarations...
// components/A.js
export default function A() {
  return <div>Hello, World!</div>
}

// Use React.lazy to create a dynamically loaded version of the component
// components/index.js
export const A = React.lazy(() => import(/* webpackChunkName: "top" */ "./A"));
export const B = React.lazy(() => import(/* webpackChunkName: "top" */ "./B"));

export const C = React.lazy(() => import(/* webpackChunkName: "bottom" */ "./C"));
export const D = React.lazy(() => import(/* webpackChunkName: "bottom" */ "./D"));


// The first time React renders a dynamically loaded component, it may 
// render "Loading..." as a placeholder until the component is ready
<React.Suspense fallback="Loading...">
  <App />
</React.Suspense>