Angular is the most popular framework for building single page web applications. Although i said single page but it doesn't necessarily mean that your application can contain only one page. You can create a website with dozens of pages using Angular. The framework itself (latest versions) is well optimized thanks to amazing team and community, however when it comes to performance we should always think about few things that can make our application run fast and smooth.

#1 Optimize main bundle with Lazy Loading

When we build our application in production without lazy loading, most likely we’ll see these files generated in dist folder

polyfills.js

scripts.js

runtime.js

styles.css

main.js

polyfills.js is for making our application compatible for different browsers. Because we write the code with newest features and not all browsers support such features.

scripts.js contains the scripts we declare in the scripts section of angular.json file

"scripts": [

"myScript.js",

]

runtime.js is the webpack loader. This file contains webpack utilities that are needed to load other files

styles.css contains all styles we declare in styles section of angular.json file

"styles": [

"src/styles.css",

"src/my-custom.css"

],

main.js contains all our code including components (ts, html and css codes), pipes, directives, services and all other imported modules (including third party).

As you can see over time main.js file will be bigger and bigger which is a problem as in order to see the website browser needs to download main.js file, execute, and render on the page which not only can be challenging for mobile users with slow internet, but also for desktops.

The easiest way of solving this issue is to split your application into several lazy modules. When we use lazy modules for each module angular generates its own chunk and it won’t be loaded until needed (typically by activating a route).

To demonstrate this i’ve created two components, app.component and second.component. Both are in app.module so there is nothing lazy here. App.component is very simple and have two buttons for navigating to Second.component and back to App.component.

However the second component contains very large text (about 1 mb) in template.

Because there is no laziness, when we build our application we get big main.js which contains all code both from app.component and second.component.

Now in the network tab of chrome dev tools we can see that indeed main.js is too big (1.3 mb)

The problem is that most of the time users visit the main page, rather than a specific page, so loading all code of other pages is not the best solution. We can create lazy module for second component and that module will be activated only when needed (i.e. only when the user navigates to that page). This gives us very small main.js and so very quick first load of main page.

When we use lazy loading, after build process new file will be created, like 4.386205799sfghe4.js. This is the chunk of that lazy module and it won’t be loaded at startup. Now when we open the app we see that main.js is very small (266 kb)