Intro to Dynamic import() in Create React App
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
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?