How to Reduce the Production Bundle Size of Your App? -  Angular

How to Reduce the Production Bundle Size of Your App? -  Angular

Reducing the bundle size = Reducing the loading time of your app

Reducing the bundle size = Reducing the loading time of your app

Image for post

Building a wonderful application is super cool, but not getting the most of the Angular robust framework is a shame. In this article, I’m going to talk about the bundle size. What a headache for large enterprise applications, Nah?

One of the differences between React apps and Angular, the bundle size that is usually bigger for Angular apps. Angular is a robust framework that comes with many interesting and useful libraries to reduce your Angular app’s bundle size.

This article gives you the essentials you’ll need to reduce your app's bundle size and get the most of the Angular framework.

To do this, here is the plan I’m going to follow bellow:

  • Lazy loading and preloading strategy
  • Impacts of tuning imports
  • Updating is essential
  • Takeouts

Excited, Nah? let’s dive in

Lazy Loading & preloading strategy

Enterprise large applications have a lot of features and functionalities that are not accessible right away after launching the app or not often used for a lot of reasons such as the user has not the right to access if he isn’t logged in, or because he’s not interested in some of the app features ...etc.

When you build the app, it’s a shame to have all the functionalities in one package, knowing that they do not necessarily need to be loaded neither used right away after launching the app. What would be great here is splitting the bundle and having only the essential, the must-have when launching the app in the main bundle and load in demand for the rest of the chunks or bundles.

Lazy loading is a key strategy that helps you chunk up your production bundle into several pieces. Instead of having one big production bundle, you would have many smaller "chunks."

angular typescript programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Learn about TypeScript Types in Programming

Basic TypeScript types that developers need to know when working with TypeScript. In this post, we'll Learn about TypeScript Types in Programming

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Having fun with Angular and Typescript Transformers - Angular

In this article, you will learn how not having fun with Angular and Typescript Transformers - Angular. Do you know the burden of handling your RxJs subscriptions manually? Did you ever forget one?