--- title: "Dev Discussions: How to Reduce your Angular Bundle Size with Google Developers Expert Santosh Yadav | CoderPad" description: "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." canonical: "https://coderpad.io/blog/development/reduce-angular-bundle-size-with-santosh-yadav/" last_modified: "2023-06-05 14:23:46" --- [Back to blog](https://coderpad.io/blog/) # Dev Discussions: How to Reduce your Angular Bundle Size with Google Developers Expert Santosh Yadav July 15, 2022 4 Minute Read By Ken Swearengen [Development](https://coderpad.io/blog/development/) If you ever have questions about Angular, [Santosh Yadav](https://twitter.com/SantoshYadavDev?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) is the person to ask. Not only is he an [Auth0 ambassador](https://auth0.com/ambassador-program) and a [GitHub Star](https://stars.github.com/), but he’s currently certified as a [Google Developers Expert](https://developers.google.com/community/experts) for Angular. Santosh jumped into the deep end with Angular early in his career—building apps, teaching others, and attending conferences in his spare time. That dedication to Angular worked out, as he’s now a leading [MEAN stack](https://en.wikipedia.org/wiki/MEAN_(solution_stack)) trainer and developer, with his own popular [Angular-focused YouTube channel](https://www.youtube.com/c/TechTalksWithSantosh/videos) to boot. [Santosh recently sat down with CoderPad Developer Advocate Corbin Crutchley](https://www.twitch.tv/videos/1314167351) to discuss one Angular topic that’s particularly popular these days – reducing the bundle size of angular apps. 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: 1. Download that bundle 2. Parse the bundle 3. Display contents of the bundle 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 – not exactly a good business practice. Santosh loves using Angular to reduce bundle size and points out four ways Angular can help you do this: 1. Tree shaking via Angular Ivy 2. Lazy loading 3. Source map analyzers 4. Standalone components ## Learn how to run front-end developer interviews that don’t suck [Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/) ## Bundle reduction tip #1: Use tree shaking A typical library will ship with hundreds of functions, but rarely will your application need to use all of them. This presents a problem in that importing the entire library can drastically increase your bundle size. Tree shaking is a way to only import the functions of a module your application will use. ![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.](https://coderpad.io/wp-content/uploads/2022/07/img_62d1791786900.png) [via Aaditya Sharma on StackOverflow](https://stackoverflow.com/questions/45884414/what-is-tree-shaking-and-why-would-i-need-it/55936233#55936233) Depending on the size of the library you’re utilizing, you can drastically cut down on your bundle size. As a bonus, you don’t need to do anything to do tree shaking in your Angular application – it’s been a part of Angular Ivy since Angular 8. If you’re not familiar with it, Ivy is – at its simplest – an ultra-efficient rendering pipeline. ![An image with four boxes labelled "rendering pipelien in angular". The first box says "template html", then an arrow to the next box which says "template data", then an arrow to the next box which says "angular interpreter", and finally an arrow pointing to a box that says "DOM".](https://coderpad.io/wp-content/uploads/2022/07/img_62d17918bda46.png) The steps Angular Ivy takes to render updates to the DOM. [Via AngularMinds](https://www.angularminds.com/blog/article/what-is-angular-ivy.html) In addition to reducing the bundle size, you’ll also get [the following benefits](https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3) with Ivy: - Faster testing - Better debugging - Improved CSS class and style binding - Improved type checking - Improved build errors - Improved build times, enabling AOT on by default - Improved Internationalization ## Bundle reduction tip #2: Lazy loading While tree shaking will prevent completely unused pieces of code from making it into your bundle, you’ll often have functions that are not used when a user first logs into your application but will be used later. Lazy loading creates multiple chunks of code that are only loaded when that particular code is used in the application. 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. ![A component map labelled Lazy loading along with the Angular symbol. The map has several components, some are marked "lazy" and the rest are not.](https://coderpad.io/wp-content/uploads/2022/07/img_62d179191890b.png) Example component structure with lazy loading. Via [9lessons.info](https://i.ytimg.com/vi/vLIIhzLGmxA/maxresdefault.jpg) While lazy loading isn’t just limited to Angular (you can use it in React via [React.lazy](https://reactjs.org/docs/code-splitting.html) as well), when paired with the other bundle-reducing technology it makes Angular quite an attractive framework for creating smaller applications. ## Bundle reduction tip #3: Source map analyzers A source map analyzer is precisely what it sounds like – it analyzes the different files, components, and modules of your application to show you how big they are. You can then use this information to see where you can improve your code base’s 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. ![A source analysis map that shows the size of different files and folders in relation to one another.](https://coderpad.io/wp-content/uploads/2022/07/img_62d17919984d0.png) Example results of a source map analysis. Via [DigitalOcean](https://www.digitalocean.com/community/tutorials/angular-bundle-size). As demonstrated in the example above, you can see which dependencies take up the most space. If they’re configured wrong, you’ll be able to tell immediately. Alternatively, it may help you decide to migrate away to different dependencies to reduce the bundle size further. ## Bundle reduction tip #4: Standalone components One of the newest Angular features to help you reduce bundle size are standalone components: “Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules,” according to the [Angular developer documentation](https://angular.io/guide/standalone-components). Angular is unique in frontend frameworks because you must register your components. 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’re just not manually including what you don’t need. ## How to avoid Angular overdose As much as Santosh loves working with Angular, he’s also a big advocate of work-life balance. He has advice for would-be workaholics and [how managers can help prevent employee burnout](https://dev.to/this-is-learning/how-i-made-workplace-toxic-1ici) – and you can watch him talk about those in the [Twitch playback video here](https://www.twitch.tv/videos/1314167351). Interested in more conversations with developers about their tech stacks? Check out these other Dev Discussions: - [Creating Fantastic User Interfaces with Esther Agbaje of Chakra UI](https://coderpad.io/blog/development/user-interfaces-with-esther-agbaje-chakra/) - [Intro to the Jamstack with Salma Alam-Naylor of Netlify](https://coderpad.io/blog/development/intro-to-jamstack-with-salma-alam-naylor/) - [SQL vs. NoSQL with James Quick of PlanetScale](https://coderpad.io/blog/development/sql-vs-nosql-with-james-quick/) ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Development ## What is Prompt Engineering? Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post. Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development ## A Guide To Using React’s useCallback() Hook Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together. Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development ## MySQL vs. PostgreSQL: How Do They Compare? A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you. Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development ## PostgreSQL LIKE Operator: A Detailed Guide When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator. Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development ## How To Use DataProvider In TestNG With Examples When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG. Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development ## How To Get Up And Running With Django Migrations: A Guide Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects. Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development ## Writing A Parameterized Test In JUnit With Examples A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide. Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development ## How To Use Assert In JUnit With Examples The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples. Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development ## A Simple Guide To TypeORM: What It Is And How To Use It Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is. Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development ## Using PreparedStatement in JDBC With Examples In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code. Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development ## React vs React Native: The Differences Explained React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice. Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development ## Logging in Django The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article. Read the post](https://coderpad.io/blog/development/logging-in-django/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)