Introducing Code Splitting to a React Web App
A Noob Meets Web Apps, Episode 6
In previous episode we introduced routing. App starts to have a structure: I’ll try to run a production build to evaluate code size.
$ npm run build
Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.
React provides out of the box solution for code splitting:
React.lazy(): let’s test it with highlighted polls. I convert
HighlighedPolls.route() to use a lazily loaded component.
React.lazy only works with default exports, I convert named export in
route.tsx are straighforward:
I used same strategy also in
features/poll/route.tsx, then I changed imports in
App.tsx not to include actual components via module:
If you make a new production build, you will observe a new chunk has been created.
Split out Firebase
I take a guess: Firebase library can be splitted to slim down code size. To do so I will create a new component in
App.tsx will be very reduced: no Firebase imports, no authentication state.
But it doesn’t work. If you try to reload you will get error:
A React component suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=…> component higher in the tree to provide a loading indicator or placeholder to display.
I admit it’s crystal clear and solution is pretty simple:
Another production build will result in a few more chunks: