What are some examples of differential loading in Angular CLI?

What are some examples of differential loading in Angular CLI?

Differential loading in Angular CLI allows you to serve different bundles to different browsers. For example, modern browsers can receive ES2015+ bundles, while older browsers get ES5 bundles. This improves performance and reduces load times.

Can you show me a code example of how to implement this?

Sure! In your angular.json, you can configure the build options to enable differential loading. Here's a snippet:

"architect": {
  "build": {
    "options": {
      "es5BrowserSupport": true
    }
  }
}

This tells Angular to create both ES5 and ES2015 bundles.

What browsers benefit from differential loading?

Modern browsers like Chrome, Firefox, and Edge benefit from ES2015 bundles, while older browsers like Internet Explorer 11 receive ES5 bundles. This ensures compatibility and performance.

Are there any downsides to using differential loading?

One downside is that it can increase the build size slightly due to the creation of multiple bundles. Additionally, it may complicate the deployment process if not managed properly.