{"id":474,"date":"2021-03-25T17:18:07","date_gmt":"2021-03-25T17:18:07","guid":{"rendered":"https:\/\/ccbill.com\/kb\/?p=474"},"modified":"2024-09-13T15:05:43","modified_gmt":"2024-09-13T15:05:43","slug":"differential-loading-angular","status":"publish","type":"post","link":"https:\/\/ccbill.com\/kb\/differential-loading-angular","title":{"rendered":"Differential Loading in Angular 8"},"content":{"rendered":"

Introduction<\/p>\n\n\n

The size and complexity of web applications are constantly growing each year. We are constructing sophisticated tools, which require more JavaScript libraries to be shipped to clients' browsers. In 2020 the median amount of JavaScript included on a page topped 440KBs<\/a>. This trend continuously adds on to the total weight of the page and is affecting its performance, both load time and runtime. <\/p>\n\n\n\n

Furthermore, the execution environment of JavaScript is constantly changing. Browsers are shipping new APIs, adding support for new JavaScript syntax, and new standards are emerging. As a developer, you\u2019d like to leverage those to improve user experience, but how to do that if you need the website to work well on legacy browsers as well? <\/p>\n\n\n\n

The answer has traditionally been polyfilling<\/em> and transpilation<\/em>. We shall touch briefly on these approaches later in this article. The issue, however, is that these approaches add even more JavaScript into the application.<\/p>\n\n\n\n

In this article, we explain why and how differential loading is used to support legacy browsers without bloating the JavaScript shipped to modern browsers.<\/strong><\/p>\n\n\n

\n
\"Understanding<\/figure><\/div>\n\n\n

What is Differential Loading Used For?<\/h2>\n\n\n\n

Differential loading ensures that the most modern browsers are not bloated with unnecessary polyfills and transpiled code targeting legacy browsers, while legacy browsers receive the full package to ensure compatibility.<\/p>\n\n\n\n

Differential loading also resolves the need for unnecessary transpilation down to ECMAScript 5 and redundant polyfills inclusion for modern browsers that do not require it.<\/p>\n\n\n\n

JavaScript Language and Browser APIs Evolution<\/h2>\n\n\n\n

JavaScript and browsers have come a long way, and the ecosystem is constantly changing. Let us take a look at the main dimensions of this change, which are the main drivers for the technique in subject.<\/p>\n\n\n\n

JavaScript Syntax Evolution and Transpilation<\/h3>\n\n\n\n

JavaScript is an implementation of ECMAScript<\/em><\/a> specification as well as Node.js<\/a>. In the past, ECMAScript<\/em> version releases were infrequent, to the extent that we needed to wait years for the release of ES6. The body governing this process is TC39, and, thankfully, they adopted a more incremental approach, which results in much more frequent version releases.<\/p>\n\n\n\n

Some of the most notable features introduced by ES6 were classes, template literals, arrow functions, and many more. You can refer to this compatibility table<\/a> for reference and more details on the ES6 scope. All of these features are widely available nowadays in modern browsers. Since then, we have had multiple yearly releases, including more improvements to the language like async\/await<\/a> or recently the optional chaining operator<\/a>.<\/p>\n\n\n\n

\"An
Top level async\/await with dynamic imports.<\/figcaption><\/figure>\n\n\n\n

The new language features go through multiple approval stages, which can be monitored on the TC39<\/em> official GitHub profile<\/a>. <\/p>\n\n\n\n

Imagine you wanted to leverage modern language constructs. If it weren't for transpilation, you would need to wait years for browsers to support it fully. Instead, we can transpile modern language syntax into constructions available to legacy browsers and thus instantly start leveraging new capabilities in our projects. <\/p>\n\n\n\n

\n\n\n\n

Note<\/strong>: One has to bear in mind that not all language constructs can be transpiled.<\/p>\n\n\n\n

\n\n\n\n

Browser APIs Evolution and Polyfills<\/h3>\n\n\n\n

The body governing the evolution of browser APIs is W3C. One can refer to the same matrix as for ECMAScript<\/em> to see what new methods or properties are added to the classes provided globally in the browsers. On top of that there is a whole new range of features, like the service workers<\/a>, WebSocket API<\/a>, or MutationObserver<\/a>.<\/p>\n\n\n\n

Some of those can be polyfilled. A polyfill is a JavaScript library that adds or patches a functionality in legacy browsers. For instance, MutationObserver<\/em> can be polyfilled, while WebSocket<\/em> connection or Service Worker<\/em> cannot.<\/p>\n\n\n\n

JavaScript Dependency Management<\/h3>\n\n\n\n

For a very long time, JavaScript had no mechanism of dependency handling. One would need to manually ensure that all required dependencies for their website or web app were correctly included and ordered. <\/p>\n\n\n\n

This was turning quickly into a maintenance nightmare as the complexity and amount of dependencies grew. That approach was clearly not scalable and several approaches were proposed to fill in this gap before the official standard emerged.<\/p>\n\n\n\n

RequireJS<\/h4>\n\n\n\n

One module loading approach is the Asynchronous Module Definition (<\/em>AMD<\/a>). RequireJS<\/a> is an example implementation of this specification. It is a first attempt to solve the problem of missing dependency-handling functionality in browsers. <\/p>\n\n\n\n

Its asynchronous nature means that code requiring dependencies is executed as part of a callback function which is invoked only after said dependencies are made available.<\/p>\n\n\n\n

\"An
AMD Syntax Example<\/figcaption><\/figure>\n\n\n\n

CommonJS<\/h4>\n\n\n\n

CommonJS<\/a> was developed primarily for Node.js and, as opposed to AMD<\/em>, it is a synchronous module loading mechanism. It is possible to leverage it on the browser side using build tools like browserify<\/a> or webpack<\/a>.<\/p>\n\n\n

\n
\"An
CommonJS Syntax Example<\/figcaption><\/figure><\/div>\n\n\n

Universal Module Definition<\/h4>\n\n\n\n

There was a mixture in the ecosystem, with some packages leveraging the Asynchronous Module Definition<\/em><\/em> and some the Synchronous Module<\/em><\/em> loading mechanism. Hence, the Universal Module Definition<\/em> (UMD<\/a>)<\/ins> was created.<\/p>\n\n\n\n

As per its name, Universal Module Definition is meant to be a universal syntax, working on both the server and client side. It detects what setup it is run on (AMD<\/em> or CommonJS<\/em>) and executes module handling accordingly.<\/p>\n\n\n\n

\"An
UMD definition retrieved from umdjs\/umd<\/a><\/figcaption><\/figure>\n\n\n\n

ECMAScript Modules<\/h4>\n\n\n\n

All this brought us to the ECMAScript Modules (ESM<\/a>), a language-level standardized way to handle modules, available in both Node.js and client side in modern browsers, and leveraged in differential loading.<\/p>\n\n\n

\n
\"An
ESM Syntax Example<\/figcaption><\/figure><\/div>\n\n\n

Transpilation<\/h3>\n\n\n\n

Transpilation is the process of compilation of JavaScript source code based on older ECMAScript<\/em> specification.<\/p>\n\n\n\n

\"Transilation
Modern Class Syntax Transpiled to ES5<\/figcaption><\/figure>\n\n\n\n

In the example above, you can see ES6 class <\/em>definition using modern syntax, and, on the right, the transpiled version leveraging a closure and a function constructor.<\/p>\n\n\n\n

There are a number of tools to handle this process, the two most popular ones being TypeScript<\/em><\/a> and babel<\/em><\/a>. Transpilation is usually a build step in your application. In case of differential loading<\/em>, the result would be two versions of the JavaScript codebase \u2013 one transpiled for the use of legacy browsers and one original meant for modern browsers.<\/p>\n\n\n\n

Polyfills<\/h3>\n\n\n\n

On the other hand, polyfills are meant to provide an implementation or a patch for a standard browser API that is not available yet, for example Object.keys<\/a> or String.prototype.padStart<\/a>.<\/p>\n\n\n\n

Core-js<\/a> is an example of a popular set of polyfills,<\/ins> being almost a one-stop shop for supporting recent APIs in legacy browsers. <\/p>\n\n\n\n

The common denominator for functionalities that can be polyfilled is the possibility of imitating said functionality with existing APIs and JavaScript language features.<\/p>\n\n\n\n

How Does Differential Loading Work?<\/h2>\n\n\n\n

The base for differential loading is a newly introduced module<\/em> type for HTML script <\/em>tags<\/a>, as well as the new nomodule <\/strong><\/em>attribute available for script tags. The concept is pretty easy and goes as follows:<\/p>\n\n\n\n

\"\"<\/td>\"\"<\/td><\/tr>
Modern browsers recognize both module<\/em> typescript and nomodule<\/em> attribute, thus are loading and processing the module<\/em> only.<\/td>Legacy browsers do not know how to handle module<\/em> type script<\/em> tags and thus ignoring them completely, while using the one marked with the attribute nomodule<\/em> as it is the standard text\/javascript <\/em>type.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
\n
\"Differential
Differential Loading Using Two Versions of the App\u2019s JavaScript<\/figcaption><\/figure><\/div>\n\n\n

In the snippet above, you can see that Chrome downloads and processes esm.bundle.mjs<\/em> file since it is included using the script <\/em>tag of type module<\/em>. Chrome ignores the es5.bundle.js <\/em>since the script <\/em>tag is marked as nomodule<\/em>. IE9, on the other hand, does the opposite since it is not able to process script <\/em>tags of type module<\/em>, and the other is perceived as a regular script<\/em> tag. <\/p>\n\n\n\n

Should you wish to read more about the nature of ECMAScriptmodules <\/em>you can refer to this succinct write-up<\/a>.<\/p>\n\n\n\n

Differential Loading in Angular<\/h2>\n\n\n\n

Differential loading<\/a> is handled by the Angular Client<\/a> automatically, based on the browserlist<\/em> target for your application. As of Angular 10<\/a>, it assumes one is targeting only the modern subset of browsers, thus disabling ES5 compilation and differential loading altogether. However, upon the update of the supported browsers list, this behavior is amended based on the list provided.<\/p>\n\n\n\n

\"Two
Two Application Bundle Sets Provided by Angular Client<\/figcaption><\/figure>\n\n\n\n

As seen in the snippet above, Angular Client<\/em> generated two sets of bundles for our application as required for differential loading<\/em> \u2013 a set of ES2015+ and ES5 resources. It also amended the index.html <\/em>file in the background with the script tags required to load up and bootstrap the application. <\/p>\n\n\n\n

Looking at the generated files, the saving in terms of payload size is clearly visible. For instance, common-es5 <\/em>bundle (legacy browsers) weighs 15KB, <\/strong>while common-es2015 bundle <\/em>(modern browsers) weighs 13.1KB<\/strong>. The difference is even more significant when we look at polyfills \u2013 ES5 (legacy browsers) is almost 70KB<\/strong>, and ES2015 (modern browsers) is only 130 bytes<\/strong>!<\/p>\n\n\n\n

How to Manually Setup of Differential Loading<\/h2>\n\n\n\n

To have differential loading<\/em> set up, one has to have a build outputting two distinct bundle types. One build generating an ES5 bundle and another generating the modern one, ES2015+. <\/p>\n\n\n\n

It is really easy to switch between compilation targets in both Babel<\/em> and Typescript<\/em>. It is enough to run your transpiler via a bundler of your choice (i.e., webpack<\/a>, rollup<\/a>, or parcel<\/a>) twice, providing a different transpiler configuration file for it to digest. For further details, see example .babelrc configuration file below:<\/p>\n\n\n\n

{\n    "presets": [\n        ["env", {\n            "targets": {\n                "browsers": ["last 2 versions"] \/\/ target determined from browsers list\n            }\n        }]\n    ],\n    "plugins": ["external-helpers"]\n}<\/code><\/pre>\n\n\n\n
And this example TypeScript configuration file:<\/p>\n\n\n\n
{\n  "compileOnSave": false,\n  "compilerOptions": {\n    "baseUrl": ".\/",\n    "outDir": ".\/dist\/out-tsc",\n    "sourceMap": true,\n    "module": "esnext",\n    "moduleResolution": "node",\n    "importHelpers": true,\n    "target": "es2015", \/\/ target ES version\n    "typeRoots": [\n      "node_modules\/@types"\n    ],\n    "lib": [\n      "es2018",\n      "dom"\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n
All those steps can be composed into a single command using npm<\/em> or yarn<\/em> scripts.<\/p>\n\n\n\n
{\n  "name": "the-portal",\n  "version": "0.0.1",\n  "scripts": {\n     "build:diff": "yarn webpack:es5 && yarn webpack:es2015",\n     "webpack:es5": "webpack --config config\/webpack.es5.js --mode production",\n     "webpack:es2015": "webpack --config config\/webpack.es2015.js --mode production"\n  },\n \u2026\n}<\/code><\/pre>\n\n\n\n
The example above invokes the build:diff <\/em>script, which in turn would call webpack <\/em>twice to produce two versions of the application, according to the configuration files it was fed. Once this is done, all you have to do is include the produced bundles in your index.html<\/em> file using the technique described above.<\/p>\n\n\n
Conclusion<\/p>\n\n\n
Differential loading<\/em> is an interesting performance optimization one can apply in every web application. It not only yields a reduction in the weight of the application and thus reduces the initial load time but also limits the amount of processing the browser has to do on loaded JavaScript. <\/p>\n\n\n\n
Differential loading enables potential runtime performance improvements in modern browsers thanks to the fact they leverage native implementations of APIs that would have been otherwise polyfilled with custom, slower JavaScript. The only price to be paid is a slightly more complex build setup with application builds taking longer.<\/p>\n\n\n\n
Differential loading is definitely worth looking into as the setup is not complicated and, in some cases, like for Angular, available out of the box. The concept is easy to grasp and thus does not add much to the overall setup complexity, giving measurable returns in the form of performance and UX improvements.<\/p>\n\n\n\n
Setting it up for your application will not do any damage, but the gains from it highly depend on the browsers list that your application has to support as well as APIs and JavaScript syntax used in your codebase. Differential loading is always beneficial but yields greatest savings when the app leverages the latest JavaScript language features and has a wide spectrum of browsers to support.<\/p>\n","protected":false},"excerpt":{"rendered":"
This article provides a comprehensive overview of differential loading. It also contains practical advice on how to set up differential loading in Angular.<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-474","post","type-post","status-publish","format-standard","hentry","category-web-development"],"acf":[],"yoast_head":"\nDifferential Loading in Angular 8 {What It Is and How to Set Up}<\/title>\n<meta name=\"description\" content=\"Learn how to use differential loading in Angular expertly. Optimize the performance of your web applications for a wide array of browsers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ccbill.com\/kb\/differential-loading-angular\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Differential Loading in Angular 8 {What It Is and How to Set Up}\" \/>\n<meta property=\"og:description\" content=\"Learn how to use differential loading in Angular expertly. Optimize the performance of your web applications for a wide array of browsers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ccbill.com\/kb\/differential-loading-angular\" \/>\n<meta property=\"og:site_name\" content=\"CCBill Knowledge Base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ccbillBIZ\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-25T17:18:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-13T15:05:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png\" \/>\n<meta name=\"author\" content=\"Artur Banas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CCBillBIZ\" \/>\n<meta name=\"twitter:site\" content=\"@CCBillBIZ\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Artur Banas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#article\",\"isPartOf\":{\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular\"},\"author\":{\"name\":\"Artur Banas\",\"@id\":\"https:\/\/ccbill.com\/kb\/#\/schema\/person\/054b4aa0928b00dbb64b830a2be8da82\"},\"headline\":\"Differential Loading in Angular 8\",\"datePublished\":\"2021-03-25T17:18:07+00:00\",\"dateModified\":\"2024-09-13T15:05:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular\"},\"wordCount\":1818,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ccbill.com\/kb\/#organization\"},\"image\":{\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ccbill.com\/kb\/differential-loading-angular#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular\",\"url\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular\",\"name\":\"Differential Loading in Angular 8 {What It Is and How to Set Up}\",\"isPartOf\":{\"@id\":\"https:\/\/ccbill.com\/kb\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png\",\"datePublished\":\"2021-03-25T17:18:07+00:00\",\"dateModified\":\"2024-09-13T15:05:43+00:00\",\"description\":\"Learn how to use differential loading in Angular expertly. Optimize the performance of your web applications for a wide array of browsers.\",\"breadcrumb\":{\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ccbill.com\/kb\/differential-loading-angular\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage\",\"url\":\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png\",\"contentUrl\":\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png\",\"width\":800,\"height\":400,\"caption\":\"Popluar browser logos and tutorial title.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ccbill.com\/kb\/differential-loading-angular#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"KB Home\",\"item\":\"https:\/\/ccbill.com\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/ccbill.com\/kb\/category\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Differential Loading in Angular 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ccbill.com\/kb\/#website\",\"url\":\"https:\/\/ccbill.com\/kb\/\",\"name\":\"CCBill Knowledge Base\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/ccbill.com\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ccbill.com\/kb\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ccbill.com\/kb\/#organization\",\"name\":\"CCBill\",\"url\":\"https:\/\/ccbill.com\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ccbill.com\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/ccbill-logo.png\",\"contentUrl\":\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/ccbill-logo.png\",\"width\":160,\"height\":70,\"caption\":\"CCBill\"},\"image\":{\"@id\":\"https:\/\/ccbill.com\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/ccbillBIZ\/\",\"https:\/\/x.com\/CCBillBIZ\",\"https:\/\/www.linkedin.com\/company\/ccbill\",\"https:\/\/www.youtube.com\/c\/CCBillBiz\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ccbill.com\/kb\/#\/schema\/person\/054b4aa0928b00dbb64b830a2be8da82\",\"name\":\"Artur Banas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ccbill.com\/kb\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/278e436cdf4785ca9f2835fc27f5bd094bdce4f1dba43323b98815b361785009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/278e436cdf4785ca9f2835fc27f5bd094bdce4f1dba43323b98815b361785009?s=96&d=mm&r=g\",\"caption\":\"Artur Banas\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Differential Loading in Angular 8 {What It Is and How to Set Up}","description":"Learn how to use differential loading in Angular expertly. Optimize the performance of your web applications for a wide array of browsers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ccbill.com\/kb\/differential-loading-angular","og_locale":"en_US","og_type":"article","og_title":"Differential Loading in Angular 8 {What It Is and How to Set Up}","og_description":"Learn how to use differential loading in Angular expertly. Optimize the performance of your web applications for a wide array of browsers.","og_url":"https:\/\/ccbill.com\/kb\/differential-loading-angular","og_site_name":"CCBill Knowledge Base","article_publisher":"https:\/\/www.facebook.com\/ccbillBIZ\/","article_published_time":"2021-03-25T17:18:07+00:00","article_modified_time":"2024-09-13T15:05:43+00:00","og_image":[{"url":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png","type":"","width":"","height":""}],"author":"Artur Banas","twitter_card":"summary_large_image","twitter_creator":"@CCBillBIZ","twitter_site":"@CCBillBIZ","twitter_misc":{"Written by":"Artur Banas","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#article","isPartOf":{"@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular"},"author":{"name":"Artur Banas","@id":"https:\/\/ccbill.com\/kb\/#\/schema\/person\/054b4aa0928b00dbb64b830a2be8da82"},"headline":"Differential Loading in Angular 8","datePublished":"2021-03-25T17:18:07+00:00","dateModified":"2024-09-13T15:05:43+00:00","mainEntityOfPage":{"@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular"},"wordCount":1818,"commentCount":0,"publisher":{"@id":"https:\/\/ccbill.com\/kb\/#organization"},"image":{"@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage"},"thumbnailUrl":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ccbill.com\/kb\/differential-loading-angular#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular","url":"https:\/\/ccbill.com\/kb\/differential-loading-angular","name":"Differential Loading in Angular 8 {What It Is and How to Set Up}","isPartOf":{"@id":"https:\/\/ccbill.com\/kb\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage"},"image":{"@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage"},"thumbnailUrl":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png","datePublished":"2021-03-25T17:18:07+00:00","dateModified":"2024-09-13T15:05:43+00:00","description":"Learn how to use differential loading in Angular expertly. Optimize the performance of your web applications for a wide array of browsers.","breadcrumb":{"@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ccbill.com\/kb\/differential-loading-angular"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#primaryimage","url":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png","contentUrl":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/differential-loading-angular-8.png","width":800,"height":400,"caption":"Popluar browser logos and tutorial title."},{"@type":"BreadcrumbList","@id":"https:\/\/ccbill.com\/kb\/differential-loading-angular#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"KB Home","item":"https:\/\/ccbill.com\/kb\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/ccbill.com\/kb\/category\/web-development"},{"@type":"ListItem","position":3,"name":"Differential Loading in Angular 8"}]},{"@type":"WebSite","@id":"https:\/\/ccbill.com\/kb\/#website","url":"https:\/\/ccbill.com\/kb\/","name":"CCBill Knowledge Base","description":"","publisher":{"@id":"https:\/\/ccbill.com\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ccbill.com\/kb\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ccbill.com\/kb\/#organization","name":"CCBill","url":"https:\/\/ccbill.com\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ccbill.com\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/ccbill-logo.png","contentUrl":"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/ccbill-logo.png","width":160,"height":70,"caption":"CCBill"},"image":{"@id":"https:\/\/ccbill.com\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ccbillBIZ\/","https:\/\/x.com\/CCBillBIZ","https:\/\/www.linkedin.com\/company\/ccbill","https:\/\/www.youtube.com\/c\/CCBillBiz"]},{"@type":"Person","@id":"https:\/\/ccbill.com\/kb\/#\/schema\/person\/054b4aa0928b00dbb64b830a2be8da82","name":"Artur Banas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ccbill.com\/kb\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/278e436cdf4785ca9f2835fc27f5bd094bdce4f1dba43323b98815b361785009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/278e436cdf4785ca9f2835fc27f5bd094bdce4f1dba43323b98815b361785009?s=96&d=mm&r=g","caption":"Artur Banas"}}]}},"_links":{"self":[{"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/posts\/474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/comments?post=474"}],"version-history":[{"count":33,"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/posts\/474\/revisions"}],"predecessor-version":[{"id":5182,"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/posts\/474\/revisions\/5182"}],"wp:attachment":[{"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/media?parent=474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/categories?post=474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ccbill.com\/kb\/wp-json\/wp\/v2\/tags?post=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}