{"id":2447,"date":"2018-04-10T11:29:22","date_gmt":"2018-04-10T09:29:22","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2447"},"modified":"2018-04-10T11:29:22","modified_gmt":"2018-04-10T09:29:22","slug":"5-things-you-wouldnt-necessarily-expect","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/","title":{"rendered":"5 Things You Wouldn&#8217;t Necessarily Expect"},"content":{"rendered":"<div class=\"article\">\n<p>AOT speeds up the application especially the startup because templates are already compiled during build. In addition to this, tree shaking reduces the needed file size by removing unused code. But there are some things, one wouldn't necessarily expect. This article presents five of them, we discovered and researched when working with it.<\/p>\n<blockquote><p>\nThis article has been written after some very insightful conversations with <a href=\"https:\/\/twitter.com\/carmenpopoviciu?lang=de\">Carmen Popoviciu<\/a>. She pointed out issues regarding AOT and Tree Shaking, helped me to discover them and their origins and reviewed this article. Big thanks for this.\n<\/p><\/blockquote>\n<h2>The most obvious: EcmaScript Modules<\/h2>\n<p>Let's start here with the most obvious and least surprising fact: You need sources based on EcmaScript 2015 for tree shaking. At least you need to use EcmaScript Modules introduced with EcmaScript 2015. Those modules use the well known <code>import<\/code> and <code>export<\/code> statements which allow for a static code analysis which is the foundation for finding unused code.<\/p>\n<p>It is possible to use a combination of EcmaScript 5 and EcmaScript Modules to support a wider range of tools like webpack 2 which - at the time of this writing - does not support EcmaScript 2015 but leverages <code>import<\/code> and <code>export<\/code> statements for tree shaking.<\/p>\n<p>Currently, the product team ships the Angular modules using this exact combination (besides additional UMD bundles). As the next section shows, this has a drawback, as there are some limitations when it comes to analyzing EcmaScript 5 code for tree shaking.<\/p>\n<h2>Current Limitations for Tree Shaking<\/h2>\n<p>Examples for Tree Shaking clearly show that it brings benefits in terms of file size. But at the time of this writing, there is much room for improvement. This mostly has to do with the fact that tools for tree shaking like Rollup and webpack2 cannot guarantee for every situation that removing unused code is safe. This is especially the case in situations where the code could introduce side effects, like changing a global variable. Therefore, these tools don't remove as much code as possible.<\/p>\n<p>As a matter of fact, this holds true for the <code>Object.defineProperty<\/code> method, which mutates the first passed object. Unfortunately, this very method is used when transpiling class members down to EcmaScript 5 and therefore affects several parts of Angular as well as libraries like Angular Material.<\/p>\n<p>One can find such parts of code by activating output warning within the webpack configuration for instance. This makes UglifyJS list every part of the bundle which it doesn't remove because of the mentioned reason:<\/p>\n<pre><code>new webpack.optimize.UglifyJsPlugin({\n    compress: {\n        warnings: true\n    },\n    output: {\n        comments: true\n    },\n    sourceMap: false\n}),\n<\/code><\/pre>\n<p>Another interesting experiment is to import a library like Angular Material into the <code>AppModule<\/code> without using it at all. Normally, one would expect that it is tree shaken but for the reason discussed here this leads to a bigger bundle.<\/p>\n<p>Further information about this can be found inside the issues of <a href=\"https:\/\/github.com\/webpack\/webpack\/issues\/2867\">webpack<\/a> and <a href=\"https:\/\/github.com\/rollup\/rollup\/issues\/1130\">rollup<\/a>.<\/p>\n<h2>The myth about smaller bundles<\/h2>\n<p>In general, one would expect smaller bundles as the result of AOT and Tree Shaking. While this should be true for tree shaking, AOT compiles templates down to JavaScript code that is bigger. In small projects this isn't necessarily noticed, as the usage of AOT allows for omitting the code for JIT compilation. But with a growing number of templates the increase in file size due to the larger emitted JavaScript code outweighs this.<\/p>\n<p><span style=\"font-weight: bold;\">Update: <\/span>This got much better with Angular 4.&nbsp;<\/p>\n<h2>SASS and other Stylesheet Languages<\/h2>\n<p>As we found out, there is also an issue when using the AOT compiler together with SASS and SCSS. It cannot deal with it and yields errors. The webpack-plugin discussed <a href=\"http:\/\/link-is-coming---currently-my-article-about-this-is-just-german\">here<\/a> automatically deals with this situation when there is a webpack loader for it.<\/p>\n<h2>Libraries need to support AOT and Tree Shaking<\/h2>\n<p>In order to shake unused code off from libraries and to use them with AOT, they also have to support it. This not only means that they have to provide the code using EcmaScript Modules. They also have to provide some meta data, especially meta data for Angular's AOT compiler.<\/p>\n<p>None other than <a href=\"http:\/\/blog.mgechev.com\/2017\/01\/21\/distributing-an-angular-library-aot-ngc-types\/\">Minko Gechev<\/a> wrote a wonderful <a href=\"http:\/\/blog.mgechev.com\/2017\/01\/21\/distributing-an-angular-library-aot-ngc-types\/\">article<\/a> about this. At the end, it also provides a check list with all the things one should consider.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>When Using AOT And Tree Shaking In Angular<\/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-2447","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>5 Things You Wouldn&#039;t Necessarily Expect - 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\/5-things-you-wouldnt-necessarily-expect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Things You Wouldn&#039;t Necessarily Expect - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"When Using AOT And Tree Shaking In Angular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-10T09:29:22+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=\"3 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\/5-things-you-wouldnt-necessarily-expect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"5 Things You Wouldn&#8217;t Necessarily Expect\",\"datePublished\":\"2018-04-10T09:29:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/\"},\"wordCount\":686,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#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\/5-things-you-wouldnt-necessarily-expect\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/\",\"name\":\"5 Things You Wouldn't Necessarily Expect - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2018-04-10T09:29:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#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\/5-things-you-wouldnt-necessarily-expect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Things You Wouldn&#8217;t Necessarily Expect\"}]},{\"@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":"5 Things You Wouldn't Necessarily Expect - 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\/5-things-you-wouldnt-necessarily-expect\/","og_locale":"en_US","og_type":"article","og_title":"5 Things You Wouldn't Necessarily Expect - ANGULARarchitects","og_description":"When Using AOT And Tree Shaking In Angular","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/","og_site_name":"ANGULARarchitects","article_published_time":"2018-04-10T09:29:22+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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"5 Things You Wouldn&#8217;t Necessarily Expect","datePublished":"2018-04-10T09:29:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/"},"wordCount":686,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#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\/5-things-you-wouldnt-necessarily-expect\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/","name":"5 Things You Wouldn't Necessarily Expect - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2018-04-10T09:29:22+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/5-things-you-wouldnt-necessarily-expect\/#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\/5-things-you-wouldnt-necessarily-expect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"5 Things You Wouldn&#8217;t Necessarily Expect"}]},{"@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\/2447","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=2447"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2447\/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=2447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}