Code Splitting via lazy import with React

load-component-import.js

/*
/feature/load-component-import.js

This is used by any async loading areas of the application

import load from '../load-component-import.js';
const FooComponentAsync = load(() => import('./FooComponent'))';
*/

import React, { Suspense } from 'react';
import Loading from './app/Loading';

// wrap a component into a lazy loader - for use with components below
export default function loadComponent(importStatement) {
  const Component = React.lazy(importStatement);
  return (props) => (
    <Suspense fallback={<Loading />}>
      <Component {...props} />
    </Suspense>
  );
}

some-section-index.js

/*
/feature/some-section/index.js

This is what is referenced in the router for this section.
*/

import load from '../load-component-import.js'

export default load(() => import('./SectionComponent.jsx'));