Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use third-party components and lazy loading technology skillfully in Angular performance optimization practice". In daily operation, it is believed that many people have doubts about how to skillfully use third-party components and lazy loading technology in Angular performance optimization practice. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer your doubts about how to skillfully use third-party components and lazy loading techniques in Angular performance optimization practice. Next, please follow the editor to study!

Environmental preparation

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Global installation of Angular CLI:npm install-g @ angular/cli

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

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

Configure SpreadJS CS in angular.json

Using SpreadJS in Angular applications

Build and run a project using Angular CLI

With the completion of the above environment, the tabular editor components can be integrated into the Angular project to achieve online import and export Excel and online data filling and other functions.

Before we begin to optimize, let's analyze what factors affect the performance of the project.

Factors affecting 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 smoothly. However, after the release, the loading time of the page opened by the user is longer than that of the development environment, and the user experience is worse. After research, it is found that in the default of Angular, NgModule is loaded acutely, that is, it will be loaded as soon as the application is loaded. All modules are loaded at the same time, whether or not you want to use them immediately.

Therefore, for large-scale multi-routing applications, lazy loading-demand-loaded NgModule mode is recommended. Lazy loading can reduce the size of the initial package, thereby reducing the loading time.

What is lazy loading?

In Web applications, the bottleneck of the system is often the response speed of the system. If the response speed of the system is too slow, users will complain, and the value of the system will be greatly reduced. Lazy loading loads the necessary modules when they are loaded for the first time, while the rest of the modules that are temporarily unused will not be loaded. For example, in the mall system, users only need to display goods when they open the home page, and there is no payment module at this time, so the payment module can use lazy loading technology.

Project optimization 1. Division of business modules

To load the Angular module lazily, you need to configure it with loadchildren instead of component in AppRoutingModule routes.

In the routing module of the lazy loading module, add a route to the component. There are two lazy modules in this demo.

two。 Establish a navigation UI

Although you can type URL directly in the address bar, it is easier to use a navigation UI. The three a tags represent the home page and two modules that need to be lazily loaded.

3. Import and routing configuration

CLI automatically adds each feature module to the application-level route mapping table and finally completes it by adding a default route.

4. Inside the feature module

Let's take a 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 his own routing module. In addition, LazyWebExcelComponent belongs to LazyWebExcelModule.

Set path to empty because the path in AppRoutingModule is already set, and this route in LazyWebExcelRoutingModule is already in the context of lazywebexcel. The configuration of the other module is similar, so I won't repeat it.

5. Make sure it works properly.

We can confirm whether these modules are lazily loaded through the web tab of the Chrome developer tool. Click Designer Component LazyLoad, you can see the following figure of the file appears, indicating that it is ready, the feature module has been lazily loaded successfully.

Summary

After optimization, the loading time of the first screen can be effectively reduced. In addition, let's talk about forRoot and forChild. CLI adds RouterModule.forRoot (routes) to AppRoutingModule's imports array. 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 instructions and registers Router.

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

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

At this point, the study on the "Angular performance optimization practice value skillful use of third-party components and lazy loading technology tutorial" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.