{"id":24348,"date":"2024-01-25T08:16:44","date_gmt":"2024-01-25T07:16:44","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=24348"},"modified":"2025-03-24T21:23:26","modified_gmt":"2025-03-24T20:23:26","slug":"defer-large-deps","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/","title":{"rendered":"How to @defer 3rd party dependencies"},"content":{"rendered":"<div class=\"wp-post-series-box series-performance-pptimization wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-performance-pptimization69f7068a218be\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-performance-pptimization69f7068a218be\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 5 of 6 in the series <em>&ldquo;Performance Optimization&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/why-is-initial-load-performance-so-important\/\">Why is Initial Load Performance so Important?<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-measure-initial-load-performance\/\">How to measure Initial Load Performance<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-use-angular-ssr-with-hydration\/\">How to use Angular SSR with Hydration<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/deferrable-views\/\">Improve Initial Load Time with Deferrable Views<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">How to @defer 3rd party dependencies<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/guide-for-ssr\/\">Updated: Guide for Server-Side Rendering (SSR) in Angular<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>Besides some minor updates concerning <strong>SSR<\/strong>, the most significant upgrade for us <strong>performance enthusiasts<\/strong> in <em>Angular 17<\/em> is undoubtedly the <strong>new block template syntax<\/strong>, including the <strong>defer block<\/strong> feature.<\/p>\n<p>In our recent performance blog post on <a href=\"https:\/\/www.angulararchitects.io\/blog\/how-to-improve-initial-load-performance-with-angular-17s-deferrable-views\/\">improving initial load performance with Angular 17's deferrable views<\/a>, we introduced the new <code>@defer<\/code> feature and its syntax.<\/p>\n<p>Deferring is an elegant and intuitive option to <strong>delay the loading of large 3rd-party dependencies<\/strong> until they are needed. This blog post will guide you on how to implement this quick-win initial load optimization task.<\/p>\n<h2>Case Study with 2 examples<\/h2>\n<p>A few months ago, we blogged about <a href=\"https:\/\/www.angulararchitects.io\/blog\/why-is-initial-load-performance-so-important\/\">why initial load performance is crucial<\/a>, focusing on SSR. A few weeks later, we introduced <a href=\"https:\/\/www.angulararchitects.io\/blog\/how-to-improve-initial-load-performance-with-angular-17s-deferrable-views\/\">Angular 17's Deferrable Views<\/a>. This time, we want to demonstrate how to quickly improve the loading of Angular apps that incorporate large 3rd-party dependencies by using <strong>standalone components<\/strong> and <code>@defer<\/code>.<\/p>\n<p>There are numerous reasons why developers might have to use such a library, which might not even be tree-shakable. However, let's not delve into those discussions. Instead, we aim to focus on how to use @defer to easily lazy-load such heavy-weighted (and, therefore, resource-intensive) dependencies.<\/p>\n<p>In our example we're using two large dependencies:<\/p>\n<ul>\n<li>\n<p><strong><a href=\"https:\/\/www.anychart.com\">AnyChart<\/a><\/strong> for some Charts<\/p>\n<\/li>\n<li>\n<p><strong><a href=\"https:\/\/www.flexmonster.com\">Flexmonster<\/a><\/strong> for a Pivot Tables<\/p>\n<\/li>\n<\/ul>\n<p>You can download and run the demo from this GitHub repo: <a href=\"https:\/\/github.com\/L-X-T\/ng-defer-large-deps-demo\">https:\/\/github.com\/L-X-T\/ng-defer-large-deps-demo<\/a>. Please checkout the <code>main<\/code> branch for the base case of our demo.<\/p>\n<p>By the way, we're using the <code>vendor: true<\/code> flag for building to create a separate <code>vendor bundle<\/code> for the 3rd-party dependencies. The <code>main bundle<\/code> will contain only the project's source, and both bundles will be eagerly loaded upon bootstrapping the Angular app.<\/p>\n<p>Furthermore, we'll use two tools to compare the builds and the initial load performance without and with deferring:<\/p>\n<ul>\n<li>\n<p><strong><a href=\"https:\/\/www.npmjs.com\/package\/webpack-bundle-analyzer\">Webpack Bundle Analyzer<\/a><\/strong> for the static build<\/p>\n<\/li>\n<li>\n<p><strong><a href=\"https:\/\/chromewebstore.google.com\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=de\">Chrome Lighthouse<\/a><\/strong> for some initial load performance metrics<\/p>\n<\/li>\n<\/ul>\n<h3>Base Build<\/h3>\n<p>Now we'll run Webpack Bundle Analyzer (WBA) for the base i.e. our <code>main<\/code> branch:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/main-build.png\" alt=\"Base Build\" \/><\/p>\n<p>You can see that the <code>vendor bundle<\/code> takes up like 99% of the build size. It's <strong>4.81MB<\/strong>. This is because the <code>anychart<\/code> und the <code>flexmonster<\/code> imports are not tree-shakable, and thus, the full libraries will land in our Angular build.<\/p>\n<h3>Base Metrics<\/h3>\n<p>Now we'll run Chrome Lighthouse for the base, running the <strong>mobile<\/strong> performance test:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/main-metrics.png\" alt=\"Base Metrics\" \/><\/p>\n<p>You can see that the performance metrics are not ideal because the browser needs to load the large <code>vendor bundle<\/code> to fire up our app.<\/p>\n<p>If you're not familiar with these metrics, make sure to check out our post about <a href=\"https:\/\/www.angulararchitects.io\/blog\/how-to-measure-initial-load-performance\/\">how to measure initial load performance<\/a>.<\/p>\n<p>Now we're going to improve the initial load by deferring the charts and the pivot table.<\/p>\n<h2>Deferring the Charts<\/h2>\n<p>Let's start with the charts. In this first example we use some different <code>on<\/code> <strong>triggers<\/strong> for demonstration.<\/p>\n<p>You can find the commit with all the changes in the <code>deferred-charts<\/code> branch.<\/p>\n<p>Here is an example:<\/p>\n<pre><code class=\"language-html\">@defer (on viewport) {\n  &lt;app-chart [id]=&quot;chart.id&quot; [data]=&quot;chart.data&quot; \/&gt;\n} @placeholder {\n  &lt;p&gt;Chart is loading immediately.&lt;\/p&gt;\n}<\/code><\/pre>\n<h3>Deferred Charts Build<\/h3>\n<p>Let's take a look at the updated build analyzer result:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/deferred-charts-build.png\" alt=\"Deferred Charts Build\" \/><\/p>\n<p>You can see that a new lazy chunk <code>498<\/code> including <code>anychart<\/code>. The <code>vendor chunk<\/code> size was reduced to <strong>2.39MB<\/strong>.<\/p>\n<h3>Deferred Charts Metrics<\/h3>\n<p>Now we'll run Chrome Lighthouse again:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/deferred-charts-metrics.png\" alt=\"Deferred Charts Metrics\" \/><\/p>\n<p>The performance metrics have improved significantly but are still not entirely satisfactory.<\/p>\n<h2>Deferring the Pivot Table<\/h2>\n<p>Let's continue with the pivot table.<\/p>\n<p>You can find the new changes in the <code>deferred-pivot-table<\/code> branch.<\/p>\n<p>Here is the <code>@defer<\/code> block for the pivot table:<\/p>\n<pre><code class=\"language-html\">@defer (on immediate) {\n  &lt;app-pivot-table \/&gt;\n} @placeholder {\n  &lt;p&gt;Pivot table is loading immediately.&lt;\/p&gt;\n}<\/code><\/pre>\n<h3>Deferred Pivot Table Build<\/h3>\n<p>Let's take another look at the final build analyzer result:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/deferred-pivot-table-build.png\" alt=\"Deferred Pivot Table Build\" \/><\/p>\n<p>You can see that another lazy chunk <code>595<\/code> including <code>flexmonster<\/code> was created. The <code>vendor chunk<\/code> size was again reduced down to <strong>0.27MB<\/strong>!<\/p>\n<h3>Deferred Pivot Table Metrics<\/h3>\n<p>Now we'll run Chrome Lighthouse one more time:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/deferred-pivot-table-metrics.png\" alt=\"Deferred Charts Metrics\" \/><\/p>\n<p>Finally, the performance metrics have improved further and are now acceptable; some of them are even good.<\/p>\n<h2>Performance Workshop<\/h2>\n<p>If you want to deep dive into Angular, we offer a variety of workshops \u2013 both in English and German.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-performance-optimization-workshop\/\"><strong>Performance Workshop<\/strong><\/a> \ud83d\ude80<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-best-practices\/\"><strong>Best Practices Workshop<\/strong><\/a> \ud83d\udcc8 (including performance related topics)<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-accessibility-workshop\/\"><strong>Accessibility Workshop<\/strong><\/a> \u267f<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p><em>Angular 17's<\/em> introduction of <em>Deferrable Views<\/em>, particularly the new @defer block syntax, marks a significant leap in simplifying the dynamic loading of <em>standalone components<\/em>. @defer not only streamlines the process but also enhances Initial Load Performance by deferring heavy components, such as those with large third-party packages, until they are needed.<\/p>\n<p>In this post, we've demonstrated how easy it is to implement an <strong>initial loading quick-win<\/strong> by applying @defer when dealing with very large 3rd-party dependencies.<\/p>\n<h2>References<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.angulararchitects.io\/blog\/why-is-initial-load-performance-so-important\/\">Why is Initial Load Performance so Important?<\/a> by Alexander Thalhammer<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/blog\/angular-17-update-control-flow-app-builder-migration\/\">Angular Update Guide to V17 incl. migrations<\/a> by Alexander Thalhammer<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/blog\/whats-new-in-angular-17\/\">What's new in Angular 17<\/a> by Manfred Steyer<\/li>\n<li><a href=\"https:\/\/blog.angular.io\/introducing-angular-v17-4d7033312e4b\">Introducing Angular 17<\/a> by Minko Gechev<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=yE-YUr_a4fU\">Deferrable Views<\/a> with Jessica Janiuk on Angular YouTube<\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/defer\">Deferrable Views<\/a> in the Angular Docs<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/blog\/guide-for-ssr\/\">Complete Guide for Server-Side Rendering (SSR) in Angular<\/a> by Alexander Thalhammer<\/li>\n<\/ul>\n<p>This blog post was written by <a href=\"https:\/\/alex.thalhammer.name\/\">Alexander Thalhammer<\/a>. Follow me on <a href=\"https:\/\/at.linkedin.com\/in\/thalhammer\">Linkedin<\/a>, <a href=\"https:\/\/twitter.com\/LX_T\">X<\/a> or <a href=\"https:\/\/github.com\/L-X-T\">giThub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is post 5 of 6 in the series &ldquo;Performance Optimization&rdquo; Why is Initial Load Performance so Important? How to measure Initial Load Performance How to use Angular SSR with Hydration Improve Initial Load Time with Deferrable Views How to @defer 3rd party dependencies Updated: Guide for Server-Side Rendering (SSR) in Angular Besides some minor [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":24349,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-24348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-performance-pptimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to @defer 3rd party dependencies - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"Deferring is an elegant and intuitive option to delay the loading of large 3rd-party dependencies until they are needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to @defer 3rd party dependencies - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Deferring is an elegant and intuitive option to delay the loading of large 3rd-party dependencies until they are needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-25T07:16:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-24T20:23:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alexander Thalhammer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LX_T\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Thalhammer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\"},\"author\":{\"name\":\"Alexander Thalhammer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\"},\"headline\":\"How to @defer 3rd party dependencies\",\"datePublished\":\"2024-01-25T07:16:44+00:00\",\"dateModified\":\"2025-03-24T20:23:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\"},\"wordCount\":804,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\",\"name\":\"How to @defer 3rd party dependencies - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg\",\"datePublished\":\"2024-01-25T07:16:44+00:00\",\"dateModified\":\"2025-03-24T20:23:26+00:00\",\"description\":\"Deferring is an elegant and intuitive option to delay the loading of large 3rd-party dependencies until they are needed.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg\",\"width\":1000,\"height\":656},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to @defer 3rd party dependencies\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\",\"name\":\"Alexander Thalhammer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"caption\":\"Alexander Thalhammer\"},\"sameAs\":[\"https:\/\/x.com\/LX_T\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to @defer 3rd party dependencies - ANGULARarchitects","description":"Deferring is an elegant and intuitive option to delay the loading of large 3rd-party dependencies until they are needed.","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:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/","og_locale":"en_US","og_type":"article","og_title":"How to @defer 3rd party dependencies - ANGULARarchitects","og_description":"Deferring is an elegant and intuitive option to delay the loading of large 3rd-party dependencies until they are needed.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/","og_site_name":"ANGULARarchitects","article_published_time":"2024-01-25T07:16:44+00:00","article_modified_time":"2025-03-24T20:23:26+00:00","og_image":[{"width":1000,"height":656,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg","type":"image\/jpeg"}],"author":"Alexander Thalhammer","twitter_card":"summary_large_image","twitter_creator":"@LX_T","twitter_misc":{"Written by":"Alexander Thalhammer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/"},"author":{"name":"Alexander Thalhammer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45"},"headline":"How to @defer 3rd party dependencies","datePublished":"2024-01-25T07:16:44+00:00","dateModified":"2025-03-24T20:23:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/"},"wordCount":804,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/","name":"How to @defer 3rd party dependencies - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg","datePublished":"2024-01-25T07:16:44+00:00","dateModified":"2025-03-24T20:23:26+00:00","description":"Deferring is an elegant and intuitive option to delay the loading of large 3rd-party dependencies until they are needed.","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/01\/shutterstock_1250106610.jpg","width":1000,"height":656},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/defer-large-deps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"How to @defer 3rd party dependencies"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45","name":"Alexander Thalhammer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","caption":"Alexander Thalhammer"},"sameAs":["https:\/\/x.com\/LX_T"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/24348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=24348"}],"version-history":[{"count":10,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/24348\/revisions"}],"predecessor-version":[{"id":29358,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/24348\/revisions\/29358"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/24349"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=24348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=24348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=24348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}