Angular performance optimization: third-party components and lazy loading technology

Overview

Many people must have complained about the performance issues of Angular applications. In fact, when building an Angular project, you can effectively improve project performance by using packaging, lazy loading, change detection strategies and caching technology, and assisting third-party components.

In order to help developers deeply understand and use Angular, this article will take online table editing as an example to demonstrate how to use lazy loading technology to implement the functions of online import and export of Excel and online data reporting in an Angular-based framework.

Environment Preparation

1. Install Angular CLI globally: npm install -g @angular/cli

2. Create a new project using Angular CLI: ng new spread-sheets-angular-cli

3. Download SpreadJS Npm package: npm install @grapecity/spread-sheets; npm install @grapecity/spread-sheets-angular

4. Configure SpreadJS CS in angular.json

5. Using SpreadJS in Angular Application

6. Build and run the project using Angular CLI

After completing the above environment setup, you can integrate the table editor component into the Angular project to realize functions such as online import and export of Excel and online data reporting.

Before we start optimizing, let's analyze what factors affect the performance of the project.

Factors that affect project performance

After integrating the SpreadJS table component, the formula data processing speed of the project is in line with expectations, and the page runs more smoothly. However, after release, the loading time when users open the page is longer than that in the development environment, resulting in a poor user experience. After investigation, I found that in Angular's default state, NgModule is eagerly loaded, which means it will be loaded as soon as possible when the application is loaded. All modules are loaded at once, whether or not they are to be used immediately.

Therefore, for large applications with multiple routes, it is recommended to use lazy loading - NgModule loading on demand. Lazy loading can reduce the size of the initial bundle, thereby reducing loading time.

What is lazy loading?

In Web applications, the bottleneck of the system is often the system's response speed. If the system responds too slowly, users will complain and the value of the system will be greatly reduced. Lazy loading will load the required modules when loading for the first time, while other modules that are not needed temporarily will not be loaded. For example, in a shopping mall system, when a user opens the homepage, only the products need to be displayed and the payment module is not needed at this time, so the payment module can use lazy loading technology.

Project Optimization

1. Divide business modules

To lazy load Angular modules, you need to use loadchildren instead of component in the AppRoutingModule routes configuration.

In the lazy-loaded module's routing module, add a route pointing to this component. This demo has two lazy loaded modules.

2. Create the Navigation UI

Although you can enter the URL directly in the address bar, it would be more convenient to have a navigation UI. The three a tags represent the homepage and two modules that need to be lazy loaded.

3. Import and route configuration

The CLI will automatically add each feature module to the application-level route map, and finally finish by adding a default route.

4. Inside the feature module

Let's look at the lazy-webexcel.module.ts file and import the lazy-webexcel-routing.module.ts and lazy-webexcel.component.ts files. @NgModule's imports array lists LazyWebExcelRoutingModule, giving LazyWebExcelModule access to its own routing module. In addition, LazyWebExcelComponent belongs to LazyWebExcelModule.

Set the path to empty because the path in AppRoutingModule has been set and this route in LazyWebExcelRoutingModule is already in the lazywebexcel context. The configuration of the other module is similar, so I will not go into details.

5. Confirm it works properly

We can confirm whether these modules are lazy loaded through the Network Page tab of Chrome's developer tools. Click Designer Component LazyLoad, and you can see the file in the figure below appear, indicating that it is ready and the feature module is lazily loaded successfully.

Summarize

After optimization, the first screen loading time can be effectively reduced. In addition, let’s talk about forRoot and forChild. The CLI will add RouterModule.forRoot(routes) to the imports array of AppRoutingModule. This lets Angular know that AppRoutingModule is a routing module, and forRoot() indicates that this is the root routing module. It configures all incoming routes, gives you access to router directives, and registers the Router.

The CLI also adds RouterModule.forChild(routes) to each feature module. This way Angular will know that this route list is only responsible for providing additional routes and is intended to be used as a feature module. You can use forChild() in multiple modules.

The above is the main process of combining SpreadJS with the Angular framework and optimizing online Excel projects with the help of lazy loading technology. In addition to lazy loading, Angular also provides many performance optimization methods, such as browser caching strategy, RxJS, Tree Shaking, AoT compilation, etc. Using these technologies well can improve the performance of your project and provide users with a better user experience.

The above is the details of third-party components and lazy loading technology for Angular performance optimization. For more information about Angular performance optimization, please pay attention to other related articles on 123WORDPRESS.COM!