2

I've been reading about lazily loading code in react.

With lazy loading, only the needed code will be loaded and doing so, your initial loading will be faster (because you will load much less code) and your overall speed will be much faster being on demand.

This is what I've understood. In a single page application, the entire page is loaded onto the browser initially. We use module bundlers like webpack to bundle the application into a single page. Everything's great. Now, if the application size is large, the load time would increase. To improve performance, we can divide the bundle into separate chunks that will be loaded only when needed. My question is, if we have to divide our page into chunks, is it still a single page application because the browser will have to request the server for these chunks whenever they are needed? I feel like there's a gap in my knowledge and I don't know what's missing.

Rhea Sanjan
  • 33
  • 5
  • Your definition of a single page application is probably wrong. I think it's not the point of loading-till-first-read, but the point of loading-for-subsequent-action. Checked Wikipedia definition? – u_Ltd. Dec 13 '20 at 20:29
  • We request for the entire application code from the server right? Our application code will be bundled into a single page which will be returned to us by the server on the first load? – Rhea Sanjan Dec 16 '20 at 14:48
  • It doesn't matter when the code is loaded. It does matter that you initiate the DOM tree once (or, speaking by the answer you already accepted, loading index.html once). The defining point of a single-page application is that few DOM fragments are exchanged, and that the DOM tree mostly stays intact. – u_Ltd. Dec 16 '20 at 23:11
  • Of course there may be an corner-case application which has steps Form1 -> Form2 -> Results -> Feedback -> Quit and every step has completely different (javascript) code. Then one could argue that every step is nearly fully loaded, so it is not really an single-page application. But the definition is about DOM, not javascript. So still the claim that this is a single-page application is right in my eyes. – u_Ltd. Dec 16 '20 at 23:11
  • Lazy loading of (javascript) code very well fits into a single-page definition. Especially when the new code is executed several times. Especially when the new code is substentially interacting with existing code. – u_Ltd. Dec 16 '20 at 23:12
  • Ah got it. I was thinking of DOM and not javascript. Thanks a ton! – Rhea Sanjan Dec 17 '20 at 09:29

1 Answers1

3

The traditional web applications used to work with postbacks to the server to fetch HTML to render a new page. Then AJAX came into the picture and applications were able to render data asynchronously thereby making sure that the user doesn't need to wait the time when the browser would refresh on postback to render the new page.
Modern Javascript libraries like angular, react etc. bring single-page application (SPA) model which runs inside a single page without requiring the browser to reload as the user navigates the site (ie. with only a single container page for entire application,like index.html). Even with code splitting and lazy loading of chunks, the application developer can ensure that user gets a pleasant experience like displaying a progress bar or loading spinner instead ( using React Suspense ). This is much better than the frustrating experience of waiting for a page reloading everytime.
Webpack ensures the chunkhash changes only for chunks which have changes in source code from previous build. This helps to take advantage of browser caching so that the request for chunks don't need to go to server everytime. Hope this was helpful !

valex
  • 116
  • 4