Angular Latest Version Feature 1 - Differential Loading


Angular 8 is newly released by Google. The angular community was eagerly waiting for this release as this version was going to be released with performance and size optimization. This version has new compiler engine ivy. This version release was said to be major release as it has many upgradations to the existing one. After this release, it assures that the new version of angular is much more robust to handle things and scenarios. Also this new version support Typescript 3.4 latest one. With this, we can handle and develop code with subsequent builds.

What is Differential Loading?

Differential loading is a very interesting concept of Angular 8. Differential loading means that Angular CLI will generate a different bundle of polyfills for different browsers. The CLI is going to produce different bundles for legacy(ES5) and modern JS(ES- 2015+). The code got translates into two parts - modern syntax and polyfills. In new browsers, we need only modern syntax with limited polyfills. But in legacy old browsers we will need both transpiled code as well as the polyfills to make things happen. As a developer, you need not do any extra effort. This feature is already turned on in the CLI.

How it works?

Script tag for different browsers
For a modern browser, we will give type module. The modern browser will know only fancyModernBundle. So this module type will not be recognized by the legacy browser and it will not load this bundle.
<script src="fancyModernBundle.js" type="module"></script>

For a legacy browser, it will not interpret the meaning of nomodule attribute. So it will load this script. In a modern browser, it will recognize this nomodule attribute. Hence this script will not load in the latest version of browsers.
<script src="legacyBundle.js" nomodule></script>



Setting up differential loading

For setting differential loading, we need to send different code or bundle to a different version of browsers. We have achieved this by sending nomodule attribute to transpiled code and module tag to the original code. But this may not work in all the browsers correctly. Javascript features will not work the same in all browsers. People around the world use a different browser. You need to do some effort for putting the correct bundle at the right set of browser.

Browserlist
It is a configuration tool that helps in setting up differential loading. It works with a transpiler or Babel. All tools will find the target browser if you add the following in the package.json file.
An entry in the package.json file or in a separate file called, browserslistrc

"browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]

The query contains the same query as follows:
  • last one version: the last version of each browser.
  • >1 %: browsers versions selected by global usage statistics
  • maintained node versions:  all Node.js versions maintained by Node.js
  • not dead: excludes dead browsers.
With Angular 8 you need not do this effort. Angular 8 will do all the tasks done for you. It's great as the size of the bundle will reduce to 8-20% in modern browsers. 

Steps to check differential loading in Angular 8 
1. Update to Angular 8 
The very first step is to install the latest version of Angular. The CLI command will by default install the Angular 8. 

Command to install Angular 8 with CLI:
npm install -g @angular/cli

If you already have some existing project, you can update it using below ng update command:

ng update @angular/cli @angular/core

After installing the current version using CLI, you can see a new file called browserslist in your project. It will contain the following by default:

// browserslist > 0.5% last 2 versions Firefox ESR not dead not IE 9-11 # For IE 9-11 support, remove 'not'.

Now you can build your project using below build command:
ng build --prod

Open the dist/index.html file in your project and check the script tags:

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script> <script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script> <script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script> <script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script> <script src=“main-es2015.63808232910db02f6170.js” type=“module”></script> <script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%26lt%3Bh1%26gt%3B%26lt%3Bfont%20color%3D%26quot%3B%23ffffff%26quot%3B%26gt%3Bng%20update%20%40angular%2Fcli%20%40angular%2Fcore%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fh1%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3Dnone%3BfillColor%3Dnone%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Brounded%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22180%22%20y%3D%22450%22%20width%3D%22530%22%20height%3D%2220%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E
%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%26lt%3Bh1%26gt%3B%26lt%3Bfont%20color%3D%26quot%3B%23ffffff%26quot%3B%26gt%3Bng%20update%20%40angular%2Fcli%20%40angular%2Fcore%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fh1%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3Dnone%3BfillColor%3Dnone%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Brounded%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22180%22%20y%3D%22450%22%20width%3D%22530%22%20height%3D%2220%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E
See the above instances of module and nomodule types to run in different browsers. This is done by Angular 8 by default.

With differential loading, we save 8-20% bundles in modern browsers. Angular 8 sends separate bundles to legacy browsers by default. That's great. 


Comments