How to Preload all Angular Bundles


To preload all angular bundles, we have to change the preload strategy to not to preload. After that, we have to tell our Angular to load all the slow modules in advance with the help of the built-in function called "preloadallmodules".

The next step is to set up our Router Module. For this setup, we should pass the option of router and preloading strategy to the "footroot" function.

Now we have to rebuild our application and again run it with the help of "ng serve". After this, we have to open our browser and go to the localhost. After going to the localhost, we would see in the "strategy tab" that all the preload angular bundles are already preloaded.

Our slow modules would also be loaded, when we would see that all these are loaded there, then it's mean that our application is fast now.

Difference:

If we wanna see if there is any difference now and before, for that we should go and open "developing tool" and enable "throtting" from there. After enabling we should connect our system to a slow connection to see if there is really any difference. Connecting to slower mode, then refreshing the main page, we would see a difference there.

No comments