ES Dynamic Imports with create-react-app

This demo shows how to use ES dynamic imports with webpack to dynamically import code. This speeds the initial page load by deferring loading until the relevant asset is needed. Dynamic import is currently a stage 3 feature. Some editors like VSCode don't recognize the syntax yet.

There are two different approaches shown.

Tab2 dynamically imports a heavy dependency using dynamic imports and Webpack's Magic comments.

Tab3 dynamically imports a heavy React component using react-loadable which uses dynamic imports behind the scenes.

Quick Start

npm install
npm start