A Brief Guide to Sharing Small Files
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
These two components are automatically imported
app.module.tsAnd 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.
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.
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
@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.