React & Browserify: Do I have options for lazy loading?

Question

I am using React 15.6 and Browserify with a Ruby and Node backend. My homepage is rather bloated and I'd like to lazy load the images below the fold. All the options I am coming across for lazy loading have webpack as a dependency. Are there any simple solutions that don't require webpack?

Answer 1

You can use the new React v16.6.0 feature React Lazy

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

Example:

const LazyImageComponent = React.lazy(() => import('./LazyImageComponent'));

function MyComponent() {
  return (
    <div>
      <LazyImageComponent  />
    </div>
  );
}