A good developer is always keen to find, learn and adapt new ways to optimize the app that he/she is working on. ‘Loadable Components’ is such a package that helps you to optimize your react app in numerous ways.
Let’s find out about its features.
Component Splitting
This feature allows you to load the components separately that are not necessary to load during the initial load. So that it will help to reduce the initial loading time.
It’s not mandatory to provide a fallback UI with this even though it’s something good to have for a better user experience.
According to the above code, when the user clicks on the button, ComponentA will get rendered into the DOM.
The below screenshot was taken during the test that I did without using loadable-components (Which means I have uncommented line 3 from the above code and commented lines 4 and 5.)
In that scenario, ComponentA is also in bundle.jstogether with all other codes. That means the app has used its resources to load ComponentA during the initial rendering of the app, which is not necessary as ComponentA is something that we need only after we click the button to render it. Hence the initial loading time is recorded as 66ms.
The below screenshot was taken during the test that I did while using loadable-components. (Which means I used the previous code exactly as it is). This time the componentA has got loaded as a separate component (srcComponentsCom…). So that it has not bothered the initial rendering. Hence the initial loading time of bundle.js has been reduced to 63ms. The size of bundle.js has increased because we had to import loadable-components package (line 4) to make things work.
Bakı ° C
