'The best way to lazyload non critical react and react-dom package

I have a specific javascript / performance question. My website is has the "above the fold content" is served Server side.

After optimizing a long time, I ask myself should I lazyload the react and react-dom package to optimize the load time. But how could I achieve this?

The best way I could imagine is to lazyload both with import but that is not the "perfect" solution. My script-tags are also defer.

The problem for me is. What if the user/browser don't scroll far enough, it doesnt need to load the react stuff. (I have already the lonly apps loaded with React.lazy and React.Suspense.

Im using webpack as a bundler and in the main app I have something like:

import 'react-apps'; // Inside there will be react and react-dom imported

PS: we are talking here to save 120kb from a 480kb load. Is it maybe over optmized?

javascriptreactjsperformancelazy-loading


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions