{"id":2427,"date":"2017-07-26T15:59:52","date_gmt":"2017-07-26T13:59:52","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2427"},"modified":"2017-07-26T15:59:52","modified_gmt":"2017-07-26T13:59:52","slug":"shrinking-angular-bundles-with-the-angular-build-optimizer","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/","title":{"rendered":"Shrinking Angular Bundles With The Angular Build Optimizer"},"content":{"rendered":"<div class=\"article\">\n<blockquote><p>\nThanks to <a href=\"https:\/\/twitter.com\/filipematossilv\">Filipe Silva<\/a> who reviewed this article and to <a href=\"https:\/\/twitter.com\/robwormald\">Rob Wormald<\/a> for a lot of insights regarding this technology. Also thanks to <a href=\"https:\/\/twitter.com\/esosanderelias\">Sander Elias<\/a> who gave important feedback.<\/p>\n<\/blockquote>\n<p><span style=\"font-weight: bold;\">Update 2017-11-06:<\/span> Since Angular CLI 1.5, the Build Optimizer is on by default when doing a production build.<\/p>\n<p>Beginning with version 1.3.0-rc.0, the Angular CLI makes use of the <a href=\"https:\/\/github.com\/angular\/devkit\/tree\/master\/packages\/angular_devkit\/build_optimizer\">Angular Build Optimizer<\/a>. This is a nifty tool that transforms the emitted JavaScript code to make tree shaking more efficient. This can result in huge improvements regarding bundle size. In this post I'm describing some simple scenarios that show the potential of this newly introduced tool. If you want to reproduce these scenarios, you find the <a href=\"https:\/\/github.com\/manfredsteyer\/angular-bundle-optimizer-experiment-01\">source code used in my GitHub repository<\/a>.<\/p>\n<p>Please note that the Angular Build Optimizer was still experimental when writing this. Therefore, it is subject to change. Nevertheless, as shown below, it comes with a high potential for shrinking bundles.<\/p>\n<h2>Scenario 1<\/h2>\n<p>To demonstrate the power of the Angular Build Optimizer, I'm using a simple Angular Application I've created with the Angular CLI. After scaffolding, I've added the <code>MdButtonModule<\/code> and the <code>MdCheckboxModule<\/code> from Angular Material as well as Angular's <code>NoopAnimationsModule<\/code> and <code>FormsModule<\/code>:<\/p>\n<pre><code>import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { AppComponent } from '.\/app.component';\nimport { MdButtonModule, MdCheckboxModule } from '@angular\/material';\nimport { NoopAnimationsModule } from '@angular\/platform-browser\/animations';\nimport { FormsModule } from \"@angular\/forms\";\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    NoopAnimationsModule,\n    MdButtonModule,\n    MdCheckboxModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/code><\/pre>\n<p>Please note that I'm using none of the added modules. I've just added them to find out how good the CLI\/ webpack is in combination with the Angular Build Optimizer when it comes to shake them off.<\/p>\n<p>After this, I've created a production build without using the Build Optimizer and another one using it. For the first one, I've leveraged the new <code>--build-optimizer<\/code>&nbsp;command line option:<\/p>\n<pre><code>ng build --prod --build-optimizer=false\n<\/code><\/pre>\n<p>For the first one you can just create a production build, as starting with CLI 1.5 the Build Optimizer is on by default. Before, you needed to use the&nbsp;<span style=\"background-color: rgb(249, 242, 244); color: rgb(199, 37, 78); font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; white-space: nowrap;\">--build-optimizer&nbsp;<\/span>flag:<\/p>\n<pre style=\"line-height: 1.42857;\"><code>ng build --prod --build-optimizer<\/code><\/pre>\n<p><\/p>\n<p>The results of this are amazing:<\/p>\n<p><a href=\"https:\/\/camo.githubusercontent.com\/5150c1ba62a158eb89ece33ecacf56bc85ccbdb8\/687474703a2f2f692e696d6775722e636f6d2f5479593548705a2e706e67\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/5150c1ba62a158eb89ece33ecacf56bc85ccbdb8\/687474703a2f2f692e696d6775722e636f6d2f5479593548705a2e706e67\" alt=\"~ 94 KB with and ~ 194 KB without the Optimizer (gzip)\" data-canonical-src=\"http:\/\/i.imgur.com\/TyY5HpZ.png\" style=\"max-width:100%;\"><\/a><\/p>\n<p>As this figure shows, using the Angular Build Optimizer the bundle size after tree shaking is about the half. This fits to my <a href=\"https:\/\/www.angulararchitects.io\/post\/2017\/02\/01\/5-things-you-wouldn-t-necessarily-expect-when-using-aot-and-tree-shaking-in-angular.aspx\">observations I've written down here some months ago<\/a>: There are situations that prevent tree shaking implementations from doing their job as well as they can. The Build Optimizer seems to compensate this.<\/p>\n<h2>Scenario 2<\/h2>\n<p>After this, I've added one component from each of the two included Angular Material modules to find out whether this is influencing tree shaking:<\/p>\n<pre><code>&lt;!-- app.component.html --&gt;\n\n&lt;button md-raised-button (click)=\"doIt()\"&gt;Raised button&lt;\/button&gt;\n&lt;md-checkbox class=\"example-margin\" [(ngModel)]=\"checked\"&gt;Checked&lt;\/md-checkbox&gt;\n<\/code><\/pre>\n<p>This led to the following results:<\/p>\n<p><a href=\"https:\/\/camo.githubusercontent.com\/278936bbc800c2cc316082191c944e8e89a4ee64\/687474703a2f2f692e696d6775722e636f6d2f6568476f4964422e706e67\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/278936bbc800c2cc316082191c944e8e89a4ee64\/687474703a2f2f692e696d6775722e636f6d2f6568476f4964422e706e67\" alt=\"117 KB with and 224 KB without the Optimizer\" data-canonical-src=\"http:\/\/i.imgur.com\/ehGoIdB.png\" style=\"max-width:100%;\"><\/a><\/p>\n<p>Of course, both bundles are bigger, because now I'm using more parts of the bundles included. But, as before, using the Angular Build Optimizer our Bundles are about half as big.<\/p>\n<h2>Scenario 3<\/h2>\n<p>Perhaps you are wondering what's the overhead introduced by the two Angular Material modules in the scenarios above. To find this out, I've removed referenced to their Angular Modules and created two more build -- one with and one without the Angular Build Optimizer:<\/p>\n<p><a href=\"https:\/\/camo.githubusercontent.com\/605b89dfafd0f76f8a93529f05612703e94fc016\/687474703a2f2f692e696d6775722e636f6d2f5342325336576d2e706e67\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/605b89dfafd0f76f8a93529f05612703e94fc016\/687474703a2f2f692e696d6775722e636f6d2f5342325336576d2e706e67\" alt=\"88 KB with and 108 KB without the Optimizer\" data-canonical-src=\"http:\/\/i.imgur.com\/SB2S6Wm.png\" style=\"max-width:100%;\"><\/a><\/p>\n<p>Compared to Scenario 1 this shows that when using the Build Optimizer, it is possible to shake off most parts of the Material Design Modules when they are imported but not used.<\/p>\n<h2>Current Limitations<\/h2>\n<p>As mentioned above, when writing this the Angular Build Optimizer was still experimental and therefore subject to change. Currently, it can introduce some issues when transforming the source code. For instance currently <a href=\"https:\/\/github.com\/angular\/angular-cli\/issues\/7093\">source maps are broken<\/a> when creating a (production) build with the Optimizer. There is also an <a href=\"https:\/\/github.com\/angular\/devkit\/issues\/51\">issue with rxjs operators<\/a> and <a href=\"https:\/\/github.com\/angular\/devkit\/issues\/52\">console logs<\/a>. Another issue can arise when using getters with side effects as the optimizer leverages UglifyJS' <a href=\"https:\/\/github.com\/mishoo\/UglifyJS2#compress-options\">pure_getters<\/a> option. This option makes Uglify to remove unused calls to getters and this leads to problems if you depend on their side effects. Please also note, that these issues can also affect included packages you don't have under your control.<\/p>\n<p>Nethertheless, as shown here, the Build Optimizer has a high potential.<\/p>\n<h2>Conclusion<\/h2>\n<p>The Angular Build Optimizer removed the issues that prevented tree shaking tools to do their job. This can result in a drastic reduction of bundle sizes.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Shrinking Angular Bundles With The Angular Build Optimizer<\/p>\n","protected":false},"author":9,"featured_media":2997,"comment_status":"closed","ping_status":"closed","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":[1],"tags":[],"class_list":["post-2427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Shrinking Angular Bundles With The Angular Build Optimizer - ANGULARarchitects<\/title>\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\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shrinking Angular Bundles With The Angular Build Optimizer - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Shrinking Angular Bundles With The Angular Build Optimizer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-26T13:59:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\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\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Shrinking Angular Bundles With The Angular Build Optimizer\",\"datePublished\":\"2017-07-26T13:59:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\"},\"wordCount\":662,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\",\"name\":\"Shrinking Angular Bundles With The Angular Build Optimizer - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2017-07-26T13:59:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shrinking Angular Bundles With The Angular Build Optimizer\"}]},{\"@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\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shrinking Angular Bundles With The Angular Build Optimizer - ANGULARarchitects","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\/shrinking-angular-bundles-with-the-angular-build-optimizer\/","og_locale":"en_US","og_type":"article","og_title":"Shrinking Angular Bundles With The Angular Build Optimizer - ANGULARarchitects","og_description":"Shrinking Angular Bundles With The Angular Build Optimizer","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/","og_site_name":"ANGULARarchitects","article_published_time":"2017-07-26T13:59:52+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Shrinking Angular Bundles With The Angular Build Optimizer","datePublished":"2017-07-26T13:59:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/"},"wordCount":662,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/","name":"Shrinking Angular Bundles With The Angular Build Optimizer - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2017-07-26T13:59:52+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/shrinking-angular-bundles-with-the-angular-build-optimizer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Shrinking Angular Bundles With The Angular Build Optimizer"}]},{"@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\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2427","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2427"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2427\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}