
Angular is a platform and framework part of full-stack development used to build client-side applications, to provide good performance and more sensitive applications for large applications.
Most of the Angular developers are experiencing that large applications are taking more time for the initial load of the application, so this will result in a bad experience to the user.
The main goal of this post is to decrease the initial loading time and speeding up the page navigations.
To increase the initial load performance, we have to organize the code structure, optimize the main-bundle file size, split the single modules into a lot of smaller modules and apply the wonderful concepts of Lazy Loading in Angular for each and every smaller module.
We also need to import your modules using only Absolute path.
List of problems to be resolved:
1. Main bundle size will be high, and it needs to be optimized.
2. Imported a lot of components in a single module.
3. For large applications, we should definitely use the concepts of Lazy Loading.
4. While taking a build in production profile, the application will throw an unknown error message.
Next Gen Product Development at your fingertips!
Read More
To build a large application in Angular, we need to focus on folder and code structure to define a well-organized structure for your project.
|–
modules
|– home
|– components
|– pages
| |– home
| |– home.component.ts
| |– home.component.html
| |– home.component.scss
|
|– home.component.spec
|– home-routing.module.ts
|– home.module.ts
As you can see over time in main.js file which will be bigger in size, it’s a problem in order to see the first page of your application, at that time it downloads the main.js file from the server and stores it in chunk.js file and renders the first page on the specific page.
This will affect our applications as it will take more time to load the initial page of your application and it will give bad performance to our clients.
1. polyfills.js – Compatible for different browsers.
2. scripts.js – Scripts section of angular.json.
3. runtime.js – Webpack loader to load other files.
4. styles.css – Styles section of angular.json file.
5. main.js – It contains all our code including components (.ts,.html and css codes), pipes, directives, services, and all other imported modules.
For smaller applications we don’t want to create a separate module for every component, we can simply import those components in the parent module.
For larger applications, there would be lot of concepts and components that will increase in size as well so it will affect the application’s performance badly.
For Example:
1. Folder – Accounts.
2. Sub-folders – Activate, Password and Settings.
3. Components in every Sub-folders.
4. Parent folder module – Accounts Module.
While your application grows in size and the number of folders also increases, it means you will be facing a performance issue at the time of initial load of your application or in any manner.
To avoid this bad performance, we need to create smaller feature modules for every component and import those smaller feature modules into your parent sub-folder module.
1. Create a smaller feature module for every component.
2. In Activate sub-folder, create a separate module file for Activate page, Activate Detail Page, Activate Edit component. Similarly, create modules for all the Password and Settings sub-folder components.
3. Now import all your created separate feature modules in the particular folder modules. For example, import your Activate Page module, Activate Detail Page module, Activate Edit module into your particular folder module in Activate Module.
4. Similarly, do the same procedure for all the sub-folders in your application.
5. Finally, import your particular sub-folder modules into your parent folder modules (Account Modules).
In Angular applications, initially, app loads and all the files like HTML, CSS, images and all the modules get downloaded from the server, it gives mainbundle.js file.
Impact on number of NgModules loading unnecessarily at the initial load of the application:
To overcome this poor performance, we need to use the concepts of Lazy Loading and Route-level Code Optimization.
const routes: Routes = [
{
path: ‘home’,
loadChildren: () => import(‘./home/home.module’).then(mod => mod.HomeModule)
},
{
path: ‘orders’,
loadChildren: () => import(‘./orders/orders.module’).then(mod => mod.OrdersModule)
}
]
While building your application, if you have added the forward slash at the end of the folder, it means Typescript will not show the exact error.
To avoid the unknown errors, only use the absolute path while importing your files in your component.
Leverge your Biggest Asset Data
Inquire Now
In Summary, to achieve and increase the initial load performance in Angular the following can be done
By Indium
By Indium
By Uma Raj
By Uma Raj
By Abishek Balakumar