Utilize Angular’s Auxiliary Routes To Reduce Application Bundle Size | by Gourav Kajal | Nov, 2022

A Brief Guide to Sharing Small Files

map user
photo by nick seagrave Feather unsplash

When it comes to increasing the performance of your online application everyone recommends reducing the bundle size first. How to reduce the bundle size for your Angular application is covered in many online articles. Our favorite is lazy loading.

But in this article, we will discuss how secondary routes can also be helpful.
If you’re interested in learning more about auxiliary routes, I’ll be writing a more detailed article shortly. I’m too lazy to write thousands of words :).

Now let’s move to the exciting step by taking action to realize this idea:

Run the following command in your favorite terminal to start a brand new Angular application:

ng new aux-route-demo

For this demonstration, we will create product-card And this shopping-card Component. Once again use our go-to Angular CLI to handle the hard work for us.

ng g c product-card
ng g c shopping-card

We need to add some real code to these components in order to increase the size of the application bundle a bit. To achieve this, we will grab some sample code from this page and paste it in both product-card And shopping-card Component.

These two components are automatically imported app.module.ts And added to declaration array because we used Angular CLI. For now, we’ll have to get rid of them.

We will now develop auxiliary routes for the components we have just introduced. To do this we will employ the routing module in the following way:

These two components will now be called app components. but for this we will use router-outlet instead of component selector.

Now, we will serve using the app ng s either ng serve and will notice main.js File size.

image by author

As you can see, our main.js The size of the file is 40.45kb. For now, remember this number and move on.

Now we will call our components using component selectors instead of helper routes. So, comment out these routes app-routing.module.ts use file and their selectors app.component.html file to call the components directly.

add both components to app.module.ts Too. Otherwise, we won’t be able to use them with the selector.

After making the above changes, serve the app again and see main.js File size.

image by author

Here, we can see that the size of main.js There has been a slight increase to 40.94kb as compared to 40.45kb.

This behavior stems from the fact that when we use helper routes for components, we do not need to define them in declarations array. @Component decorator requires data @NgModule Decorator, which declares components, to create the component definition. The module declaring the component chooses the selector, which is then used to compile the component’s template.

To prevent the same component selector from interfering with the compilation of components in other modules, global component information is required.

Additionally, because we have moved our components out of the app module declarations array, our application does not need to do painstaking compilation for those components.

Even though such a small size difference may not be beneficial for small applications, when we develop complex and large-scale applications that have multiple lazy-loaded modules, each containing multiple large components, these All those little bytes can add up to tens of kilobytes, which can significantly increase an application’s performance by reducing its size.

Additionally, it can help us maintain a concise and correct declaration array, resulting in neater module files.

Now let us understand how to reduce the size of Angular application bundle using helper routing. Additionally, because every Angular application uses routing, adding supporting routes to reusable components can increase efficiency by reducing application size and promoting clean code.

Leave a Reply