{"id":8657,"date":"2022-07-15T12:03:08","date_gmt":"2022-07-15T19:03:08","guid":{"rendered":"https:\/\/coderpad.io\/?p=8657"},"modified":"2023-06-05T14:23:46","modified_gmt":"2023-06-05T21:23:46","slug":"reduce-angular-bundle-size-with-santosh-yadav","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/reduce-angular-bundle-size-with-santosh-yadav\/","title":{"rendered":"Dev Discussions: How to Reduce your Angular Bundle Size with Google Developers Expert Santosh Yadav"},"content":{"rendered":"\n<p>If you ever have questions about Angular, <a href=\"https:\/\/twitter.com\/SantoshYadavDev?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor\" target=\"_blank\" rel=\"noreferrer noopener\">Santosh Yadav<\/a> is the person to ask.<\/p>\n\n\n\n<p>Not only is he an <a href=\"https:\/\/auth0.com\/ambassador-program\" target=\"_blank\" rel=\"noreferrer noopener\">Auth0 ambassador<\/a> and a <a href=\"https:\/\/stars.github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Star<\/a>, but he\u2019s currently certified as a <a href=\"https:\/\/developers.google.com\/community\/experts\" target=\"_blank\" rel=\"noreferrer noopener\">Google Developers Expert<\/a> for Angular.&nbsp;<\/p>\n\n\n\n<p>Santosh jumped into the deep end with Angular early in his career\u2014building apps, teaching others, and attending conferences in his spare time. That dedication to Angular worked out, as he\u2019s now a leading <a href=\"https:\/\/en.wikipedia.org\/wiki\/MEAN_(solution_stack)\" target=\"_blank\" rel=\"noreferrer noopener\">MEAN stack<\/a> trainer and developer, with his own popular<a href=\"https:\/\/www.youtube.com\/c\/TechTalksWithSantosh\/videos\" target=\"_blank\" rel=\"noreferrer noopener\"> Angular-focused YouTube channel<\/a> to boot.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.twitch.tv\/videos\/1314167351\" target=\"_blank\" rel=\"noreferrer noopener\">Santosh recently sat down with CoderPad Developer Advocate Corbin Crutchley<\/a> to discuss one Angular topic that\u2019s particularly popular these days \u2013 reducing the bundle size of angular apps.<\/p>\n\n\n\n<p>Bundle sizes impact the performance of a website. If you have a bundle of greater than 1MB, then your user has to wait longer for the browser to:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Download that bundle<\/li><li>Parse the bundle<\/li><li>Display contents of the bundle<\/li><\/ol>\n\n\n\n<p>While this might not seem like a big deal, each MB can take an extra second, which can easily cause a user to lose interest and navigate away from the site \u2013 not exactly a good business practice.<\/p>\n\n\n\n<p>Santosh loves using Angular to reduce bundle size and points out four ways Angular can help you do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Tree shaking via Angular Ivy<\/li><li>Lazy loading<\/li><li>Source map analyzers<\/li><li>Standalone components<\/li><\/ol>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\" data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Bundle reduction tip #1: Use tree shaking<\/h2>\n\n\n\n<p>A typical library will ship with hundreds of functions, but rarely will your application need to use all of them.<\/p>\n\n\n\n<p>This presents a problem in that importing the <em>entire<\/em> library can drastically increase your bundle size.<\/p>\n\n\n\n<p><em>Tree shaking<\/em> is a way to only import the functions of a module your application will use.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/07\/img_62d1791786900.png\" alt=\"A comparison of component map with tree shaking. On the left is one index.js file with 3 modules. One module has three files, and one of those files has three functions. In total this beforee images has four files and 11 functions that will be build. On the right is the after tree shaking image where one file has one module, that module has one file, and that file has one function that will be included in the bundle.\"\/><figcaption><a href=\"https:\/\/stackoverflow.com\/questions\/45884414\/what-is-tree-shaking-and-why-would-i-need-it\/55936233#55936233\" target=\"_blank\" rel=\"noreferrer noopener\">via Aaditya Sharma on StackOverflow<\/a><\/figcaption><\/figure>\n\n\n\n<p>Depending on the size of the library you\u2019re utilizing, you can drastically cut down on your bundle size. As a bonus, you don\u2019t need to do anything to do tree shaking in your Angular application \u2013 it\u2019s been a part of Angular Ivy since Angular 8.<\/p>\n\n\n\n<p>If you\u2019re not familiar with it, Ivy is \u2013 at its simplest \u2013 an ultra-efficient rendering pipeline.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/07\/img_62d17918bda46.png\" alt=\"An image with four boxes labelled &quot;rendering pipelien in angular&quot;. The first box says &quot;template html&quot;, then an arrow to the next box which says &quot;template data&quot;, then an arrow to the next box which says &quot;angular interpreter&quot;, and finally an arrow pointing to a box that says &quot;DOM&quot;.\"\/><figcaption>The steps Angular Ivy takes to render updates to the DOM. <a href=\"https:\/\/www.angularminds.com\/blog\/article\/what-is-angular-ivy.html\" target=\"_blank\" rel=\"noreferrer noopener\">Via AngularMinds<\/a><\/figcaption><\/figure>\n\n\n\n<p>In addition to reducing the bundle size, you\u2019ll also get <a href=\"https:\/\/blog.angular.io\/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3\" target=\"_blank\" rel=\"noreferrer noopener\">the following benefits<\/a> with Ivy:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Faster testing<\/li><li>Better debugging<\/li><li>Improved CSS class and style binding<\/li><li>Improved type checking<\/li><li>Improved build errors<\/li><li>Improved build times, enabling AOT on by default<\/li><li>Improved Internationalization<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Bundle reduction tip #2: Lazy loading<\/h2>\n\n\n\n<p>While tree shaking will prevent completely unused pieces of code from making it into your bundle, you\u2019ll often have functions that are not used when a user first logs into your application but will be used later.<\/p>\n\n\n\n<p>Lazy loading creates multiple chunks of code that are only loaded when that particular code is used in the application.<\/p>\n\n\n\n<p>This can really reduce the size of the application, especially if you split libraries into different feature modules that are only used when needed by the application.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/07\/img_62d179191890b.png\" alt=\"A component map labelled Lazy loading along with the Angular symbol. The map has several components, some are marked &quot;lazy&quot; and the rest are not. \"\/><figcaption>Example component structure with lazy loading. Via <a href=\"https:\/\/i.ytimg.com\/vi\/vLIIhzLGmxA\/maxresdefault.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">9lessons.info<\/a><\/figcaption><\/figure>\n\n\n\n<p>While lazy loading isn\u2019t just limited to Angular (you can use it in React via <a href=\"https:\/\/reactjs.org\/docs\/code-splitting.html\" target=\"_blank\" rel=\"noreferrer noopener\">React.lazy<\/a> as well), when paired with the other bundle-reducing technology it makes Angular quite an attractive framework for creating smaller applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bundle reduction tip #3: Source map analyzers<\/h2>\n\n\n\n<p>A source map analyzer is precisely what it sounds like \u2013 it analyzes the different files, components, and modules of your application to show you how big they are.<\/p>\n\n\n\n<p>You can then use this information to see where you can improve your code base\u2019s efficiency to reduce its size. Santosh found source map analyzers particularly useful to reduce the size of a component with a large bundle size due to a CSS issue.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/07\/img_62d17919984d0.png\" alt=\"A source analysis map that shows the size of different files and folders in relation to one another.\"\/><figcaption>Example results of a source map analysis. Via <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/angular-bundle-size\" target=\"_blank\" rel=\"noreferrer noopener\">DigitalOcean<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>As demonstrated in the example above, you can see which dependencies take up the most space. If they\u2019re configured wrong, you\u2019ll be able to tell immediately.<\/p>\n\n\n\n<p>Alternatively, it may help you decide to migrate away to different dependencies to reduce the bundle size further.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bundle reduction tip #4: Standalone components<\/h2>\n\n\n\n<p>One of the newest Angular features to help you reduce bundle size are standalone components:<\/p>\n\n\n\n<p>\u201cStandalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules,\u201d according to the <a href=\"https:\/\/angular.io\/guide\/standalone-components\" target=\"_blank\" rel=\"noreferrer noopener\">Angular developer documentation<\/a>.<\/p>\n\n\n\n<p>Angular is unique in frontend frameworks because you must register your components.&nbsp;<\/p>\n\n\n\n<p>Standalone components force you to have more explicit imports, which enables you to side-step the need for tree-shaking in some places because you\u2019re just not manually including what you don\u2019t need.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to avoid Angular overdose<\/h2>\n\n\n\n<p>As much as Santosh loves working with Angular, he\u2019s also a big advocate of work-life balance. He has advice for would-be workaholics and <a href=\"https:\/\/dev.to\/this-is-learning\/how-i-made-workplace-toxic-1ici\" target=\"_blank\" rel=\"noreferrer noopener\">how managers can help prevent employee burnout<\/a> \u2013 and you can watch him talk about those in the <a href=\"https:\/\/www.twitch.tv\/videos\/1314167351\" target=\"_blank\" rel=\"noreferrer noopener\">Twitch playback video here<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Interested in more conversations with developers about their tech stacks? Check out these other <em>Dev Discussions<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/coderpad.io\/blog\/development\/user-interfaces-with-esther-agbaje-chakra\/\">Creating Fantastic User Interfaces with Esther Agbaje of Chakra UI<\/a><\/li><li><a href=\"https:\/\/coderpad.io\/blog\/development\/intro-to-jamstack-with-salma-alam-naylor\/\">Intro to the Jamstack with Salma Alam-Naylor of Netlify<\/a><\/li><li><a href=\"https:\/\/coderpad.io\/blog\/development\/sql-vs-nosql-with-james-quick\/\">SQL vs. NoSQL with James Quick of PlanetScale<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Bundle sizes impact the performance of a website. In this blog post, Google Developers Expert Santosh Yadav takes us through four methods to reduce Angular bundle size.<\/p>\n","protected":false},"author":12,"featured_media":8727,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[63],"keyword-cluster":[],"class_list":["post-8657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=8657"}],"version-history":[{"count":34,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8657\/revisions"}],"predecessor-version":[{"id":22212,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8657\/revisions\/22212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/8727"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=8657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=8657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=8657"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=8657"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=8657"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=8657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}