Learn all about one of its coolest new features: differential loading. Differential loading lets you serve up different bundles to different browsers and make your application even faster!
In this article, I want to dive into that last one: differential loading. What is that? Why does it matter? What do I need to do about it (if anything)?
Angular 8 now sends separate bundles to legacy browsers by default.
Angular 8 has only been out for about a week at the time I’m writing this, but there’s already been 17,000 “What’s New” articles published. Rather than throw my own take on the pile, I’ll refer you to the official Angular release announcement but here are the high points:
[import()](https://next.angular.io/guide/deprecations#loadchildren-string-syntax)syntax. You can even perform this automatically for your app with the
Sounds cool, right? How does this work? Modern browsers have the ability to interpret a
module type in the
script HTML tag and to ignore a
nomodule attribute. It looks like this:
When a modern browser (like a new version of Chrome) runs across this, it will know to only load
fancyModernBundle. Likewise, when an older browser sees this, it won’t recognize the
module type and only load
nomodule tag and the original into the
It turns out that splitting up your bundle for differential loading is a combination of art and science. To pull this off, your bundler (like Webpack) and your transpiler or compiler (like Babel or TypeScript) must work together to divide up your code and add the correct polyfills in the right places. Luckily, there’s a configuration tool called
[browserslist](https://github.com/browserslist/browserslist) that does nearly all of the heavy lifting for you.
Browserslist works with tools like Babel and is essentially a configuration tool that accepts query strings, which it runs against Can I Use data. Tools use Browserslist through either an entry in
// package.json "browserslist": [ "last 1 version", "> 1%", "maintained node versions", "not dead" ]
Or in a separate config file called
// .browserslistrc # Browsers that we support last 1 version > 1% maintained node versions not dead
Both of these formats contain the same query:
last one version: the last version for each browser
>1%: browsers versions selected by global usage statistics
maintained node versions: all Node.js versions, which are still maintained by Node.js Foundation
not dead: excludes "dead" browsers, which are the same as those from a
last 2 versionsquery, but with less than 0.5% in global usage statistics and without official support or updates for 24 months
Browserslist also has a
defaults query that works for many people. They’ve got great explanations of the queries on their GitHub repo and there’s even a site called browserl.ist that lets you plug in a query and see a visual list of supported browsers.
Ordinarily, you’d need to configure your bundler and Babel or TypeScript to use
browserslist to split up your code into the correct bundles. With version 8 of the Angular CLI, you actually get this set up right out of the gate with nothing for you to do! This is awesome because differential loading saves on average 7-20% in bundle size for Angular applications in modern browsers. In fact, angular.io saved over 40kB of its initial bundle size for modern browsers when the team enabled differential loading.
First, make sure you have the latest version of the Angular CLI installed:
npm install -g @angular/cli
If you’d like to try this on an existing project, you can update it to Angular 8 by running:
ng update @angular/cli @angular/core
Check out the Angular Update Guide if your app requires more heavy lifting to update, like if it’s currently in version 6 or lower.
Otherwise, you can create a new application:
ng new diff-loading
Follow the prompts about routing and styling and then you’re good to go!
If you open the new project in your favorite editor, you’ll notice a new file called
browserslist. It contains 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'.
You can adjust this list to match better with your own user demographics.
One very important note about this: See that
not IE 9-11part? If you need to support those browsers, you can remove the
not, but it comes at a price. Those versions of Internet Explorer can’t take advantage of differential loading, so it will be disabled.
If you open
tsconfig.json, you’ll see a particularly big change in the
target property: it’s set to
es2015 by default instead of
Now that you’ve seen where the configuration lives, build the application with this command:
ng build --prod
After it’s done, open up
dist/index.html and notice the
See all those
nomodule instances? The Angular CLI did all that for you!
Now you just need to see it in action. Install a simple server like
npm install -g http-server
Then, within your project folder, serve up the project inside the
Open Chrome or another modern browser and head to the address of the server (on my machine it’s
[http://192.168.0.4:8080](http://192.168.0.4:8080) but it may be different for you). Open up the network tab of the developer tools and refresh the page. You should see only the scripts that include
es2015 in the name!
One quick note before I end this tutorial. If you change the different configurations, there are four different scenarios you could end up with:
To read more, check out the official documentation.
Angular 8 brings lots of great new stuff to Angular, including differential loading. I hope you’ve enjoyed this look into what differential loading is, how it works, and how to use it in Angular 8.
Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.
In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...
Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.