Angular 8: Differential Loading with pros and cons

Angular 8

Angular 8 is released. Angular is keep growing by adding features that make it more stable. What’s new
in Angular 8.

  1. Experimental Support for Ivy (Not Stable)
  2. Experimental Support for Bazel
  3. Differential Loading

Ivy

As Ivy was the main feature for Angular 7 but it released with basic support, we were expecting it to be stable on Angular 8. We still need to wait a bit for this feature.

Bazel

Build tool for Angular. It’s not finished and tested.

Differential Loading

Angular 8 has come with differential loading. Differential loading is a process by which browser chooses between modern and legacy build. Modern builds generates js with es2015 and legacy builds generates js with es5. Browser will pick bundle and loads application for the user.

Once you update the app with ng update, you can notice that module is added new and target set to es2015. Previously it was set as es5.

It informs build process that you want to take advantage of differential loading or not. In index.html file there will be two files reference . For example,

Its applicable for lazy loaded component also. Overall saving as per angular is around 7% to 20%. For my project it reduced around 7%. 

To opt-out this feature one can set target to es5 again and it will not generate two builds. 

Pros

  1. Application loads faster that improves overall user experience
  2. Opt-in and opt-out is easy
  3. No code change needed
  4. Google SEO and Crawl advantage as app loads more faster

Cons

  1. High build time as its building two builds
  2. Some Unexpected error can be face and one may lead to opt-out this feature.

 

Read more on the official document. Let know your feedback about differential loading feature in comment section.

Thank you for reading.

 

One thought on “Angular 8: Differential Loading with pros and cons

Leave a Reply

Your email address will not be published. Required fields are marked *