CODEWITHSUNDEEP
reactjssingle-page-applicationprogressive-web-apps
S. Feunmajer
S. Feunmajer

Reputation: 325

Split React Single page app into several Single Page Apps for faster loading?

This may sound weird at first but please read until the end. Generally Single Page Applications (SPAs) consists of a single index.html and several JS scripts and routing is handled via Javascript with libraries like React Router, so the first load is slow because you are loading the entire application. So with the advent of Progressive Web Apps and Service Workers would not be better to split your Single Page Application into several SPAs for faster loading? Auth state and other shared state could be stored in Local Storage like for example Firebase does it. What are the issues with this approach?

Upvotes: 1

Views: 418

Answers (1)

Nemanja Lazarevic
Nemanja Lazarevic

Reputation: 1047

As a comment from Sam already mentioned you should use code splitting to speed up the loading of your application. You can start off by code splitting your app by the routes and build up from there. Try using React.Suspense and React.lazy it should be a fairly quick process and you will see immediate results. Monitor the 'Network' tab in the dev tools and you will see different chunks loaded as you navigate your application.

Upvotes: 4

Related Questions