Many of you have complained about performance problems with Angular applications. In fact, when building An Angular project, you can improve performance by using packaging, lazy loading, change detection strategies, and caching techniques to assist third-party components.

In order to help developers understand and use Angular, this article will take online table editing, the most typical business scenario among our clients, as an example to demonstrate how to implement online import and export of Excel and online data filling in an Angular framework with lazy loading technology.

Environment to prepare

  1. NPM install -g@angular/CLI

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

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

  4. Configure SpreadJS CS in angular.json

  5. Use SpreadJS in Angular applications

  6. Build and run projects using the Angular CLI

With the above environment setup, SpreadJS and online form editor components can be integrated into Angular projects, enabling online import and export of Excel and online data filling.

Before we start tuning, let’s analyze what factors affect project performance.

Factors affecting project performance

After integrating the SpreadJS table component, the project’s formula data processing was as fast as expected and the page ran smoothly. However, after the release, the loading time of the user opening page is longer than that of the development environment, resulting in poor user experience. After investigating, Angular’s default ngModules are loaded acutely, as soon as the application loads. All modules are loaded at once, whether or not they are used immediately.

Therefore, for large applications with multiple routes, it is recommended to use lazy loading — NgModule loading on demand. Lazy loading reduces the size of the initial package and thus the load time.

What is lazy loading?

In Web applications, the bottleneck of the system is often the response speed of the system. If the system responds too slowly, users will complain, and the value of the system will be compromised. Lazy loading will load necessary modules for the first time, while other modules that are not temporarily needed will not be loaded. For example, in the mall system, when users open the home page, they only need to display goods. At this time, the payment module is not needed, so the payment module can use lazy loading technology.

Project optimization

1. Divide service modules

To lazily load Angular modules, configure loadChildren instead of Component in AppRoutingModule Routes.

Add a route to the component in the routing module of the lazy-loaded module. There are two lazy modules in this demo.

2. Create a navigation UI

It’s possible to type urls directly into the address bar, but it’s better to have a navigation UI. The three A tags represent the home page and the two modules that need lazy loading.

3. Import and route configuration

The CLI automatically adds each feature module to the application-level route mapping table. The default route is added to complete the process.

4. Inside the feature module

Module. ts and lazy-webexcel.component.ts. The imports of the @ NgModule array lists the LazyWebExcelRoutingModule, let LazyWebExcelModule can access his own routing module. In addition, LazyWebExcelComponent belongs to the LazyWebExcelModule.

Set the path is empty, because in the AppRoutingModule path has already been set up, the LazyWebExcelRoutingModule road which is already in lazywebexcel in this context. The other module configuration is similar, so I won’t go over it again.

5. Make sure it works

You can check the Web TAB of Chrome’s Developer Tools to see if these modules load lazily. Click Designer Component LazyLoad and you will see the file below, indicating that it is ready and the feature module has been lazily loaded successfully.

conclusion

After optimization, the loading time of the first screen can be effectively reduced. Also, say something about forRoot and forChild. The CLI adds RouterModule.forroot (Routes) to the Imports array of the AppRoutingModule. This lets Angular know that AppRoutingModule is a routing module, and forRoot() indicates that it is a root routing module. It configures all incoming routes, gives you access to Router instructions, and registers the Router.

The CLI also adds RouterModule.forChild(Routes) to feature modules. This way Angular knows that the route list only provides additional routes and is designed to be used as a feature module. You can use forChild() in multiple modules.

That’s how SpreadJS combines the Angular framework with lazy loading techniques to optimize online Excel projects. In addition to lazy loading, Angular provides many performance optimizations, such as browser caching, RxJS, Tree Shaking, AoT compilation, etc. Using these techniques can improve your project performance and provide a better user experience.