How does differential loading work?

Differential loading is an Angular CLI feature that automatically builds and serves two separate bundles of your application: a modern ES2015+ bundle and a legacy ES5 bundle. This allows browsers to load only the code they need, leading to smaller bundle sizes and faster application loading times for modern browsers, while ensuring compatibility with older browsers.

What is Differential Loading?

At its core, differential loading means delivering different JavaScript bundles to different browsers based on their capabilities. Modern browsers (supporting ES2015/ES6 and newer features) receive smaller, more optimized bundles written in modern JavaScript, which they can execute directly. Older browsers (typically Internet Explorer 11 or older mobile browsers) receive larger, transpiled ES5 bundles that ensure compatibility.

Why is it Important?

• Smaller Bundles for Modern Browsers: Modern JavaScript requires less polyfilling and can be more compact, leading to smaller download sizes and faster parse/execute times.
• Faster Loading Times: Less data to download and process translates directly into improved perceived performance and user experience.
• Automatic Polyfill Management: The Angular CLI handles the inclusion of necessary polyfills only for the ES5 bundle, further reducing the modern bundle size.
• Broad Browser Compatibility: Ensures your application runs correctly on a wide range of browsers without sacrificing performance for the majority of users on modern browsers.

How it Works (Under the Hood)

The Angular CLI orchestrates differential loading during the build process (e.g., ng build --prod). Here's a breakdown of the steps:

1. `tsconfig.json` Configuration

The tsconfig.json files play a crucial role. For a production build, the CLI uses two TypeScript configurations internally: one targeting es2015 (for modern browsers) and another targeting es5 (for legacy browsers). This dictates how TypeScript compiles your application code.

2. Multiple Build Targets

The CLI performs two separate builds: one for the modern JavaScript target (e.g., ES2015/ES2017) and one for the legacy JavaScript target (ES5). This results in two sets of JavaScript bundles for your application.

3. `index.html` Script Tag Injection

After the bundles are generated, the Angular CLI modifies your index.html file to include both sets of bundles using specific HTML attributes: type="module" and nomodule.

a. `type="module"`

This attribute is used for the modern ES2015+ bundles. Browsers that understand type="module" (i.e., modern browsers) will load and execute these scripts. Crucially, these browsers will ignore any scripts with the nomodule attribute.

b. `nomodule`

This attribute is used for the legacy ES5 bundles. Browsers that *do not* understand type="module" (i.e., older browsers) will ignore the type="module" scripts and instead load and execute these nomodule scripts.

4. Browser Loading Logic

When a browser requests your index.html, it evaluates the script tags:

• Modern Browser: Sees <script type="module">, loads and executes the modern bundles. It then sees <script nomodule> and ignores them.
• Legacy Browser: Does not understand type="module", so it ignores those scripts. It then sees <script nomodule>, loads and executes the legacy bundles.

Example Script Tags in `index.html` (Simplified)

<!-- Modern ES2015+ bundles for browsers that support ES Modules -->
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="main.js" type="module"></script>

<!-- Legacy ES5 bundles for older browsers -->
<script src="runtime-es5.js" nomodule></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="main-es5.js" nomodule></script>

Key Takeaways

• Differential loading is an automatic optimization feature in the Angular CLI.
• It generates two sets of bundles: modern (ES2015+) and legacy (ES5).
• It leverages type="module" and nomodule attributes in index.html for browser-specific loading.
• Modern browsers get smaller, faster bundles; legacy browsers get compatible, larger bundles.
• This ensures both performance for the majority and compatibility for the minority.