Intro to Dynamic import() in Create React App

I’m going to scope this article on the dynamic import (in Stage 3) proposal to just React and React components with in the context of Create React App.

This article posted May 18, 2017, by Dan Abramov on the React blog, boils the dynamic import function as a means of code splitting.

Neehar Venugopal has a great video titled “A Beginner’s Guide to Code Splitting Your React App.” Watch the video.

Some take aways from Neehar’s video:

• Code splitting is really easy
• As developers, we usually sit in front of a PC (Personal Computer), we tend to forget that more and more people are using their mobile phones on a range of different connection speeds.
• Dynamically importing components is as simple as fetching data into a component.
• …More (Did you watch it?)

I’m going to make a project using create-react-app dynamic. Let’s replace the default ./App import with a async component import.

The following example is mainly to outline how one can start to visualize async components as data dependencies. Treating the function import() as you would treat fetch request.

If your async imported component needs additional props, then you’ll need to make that a homework assignment for yourself.

Please share some win or fail stories, if you’ve tried to implement this. What are some of the gotchas, and some of the “AHA!” moments?