Third party components and lazy loading technology for angular performance optimization

  • summary
  • Environmental preparation
  • Factors affecting project performance
  • What is lazy loading?
  • Project optimization
    • 1. Division of business modules
    • 2. Create navigation UI
    • 3. Import and route configuration
    • 4. Inside the feature module
    • 5. Confirm that it works normally
  • summary


    Many people should have complained about the performance problems of angular applications. In fact, when building an angular project, the project performance can be effectively improved by using packaging, lazy loading, change detection strategy and caching technology, and then assisting third-party components.

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

    Environmental 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 the spreadjs NPM package: NPM install @ gravity / spread sheets; npm install @grapecity/spread-sheets-angular

    4. In angular Configure spreadjs CS in JSON

    5. Use spreadjs in angular application

    6. Use the angular cli to build and run the project

    After the above environment is built, the table editor component can be integrated into the angular project to realize the functions of online import and export of Excel and online data filling.

    Before starting optimization, 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 meets the expectation, and the page runs smoothly. However, after publishing, the loading time of the user opening the page is longer than that of the development environment, resulting in a poor user experience. After investigation, it is found that in the default of angular, ngmodule is loaded acutely, that is, it will be loaded as soon as possible when the application is loaded. Whether you want to use it immediately or not, all modules will be loaded together.

    Therefore, for large-scale applications with multiple routes, it is recommended to adopt the mode of lazy loading – ngmodule loaded on demand. Lazy loading can reduce the size of the initial package and reduce the loading time.

    What is lazy loading?

    In web applications, the bottleneck of the system often lies in the response speed of the system. If the system response speed is too slow, users will complain, and the value of the system will be greatly reduced. Lazy loading will load the necessary modules when loading for the first time, while the other modules that are temporarily unavailable 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 used, so the payment module can use lazy loading technology.

    Project optimization

    1. Division of business modules

    To lazy load the angular module, you need to use loadchildren instead of component in apprutingmodule routes for configuration.

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

    2. Create navigation UI

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

    3. Import and route configuration

    The CLI will automatically add each feature module to the application level routing mapping table, and finally complete it by adding the default routing.

    4. Inside the feature module

    Let’s go to lazy webexcel module. TS file, imported lazy webexcel routing module. Ts and lazy webexcel component. TS [email protected] The imports array of ngmodule lists lazywebexcelroutingmodule so that lazywebexcelmodule can access its own routing module. In addition, lazywebexcelcomponent belongs to lazywebexcelmodule.

    Set the path to null, because the path in approutingmodule has been set, and this route in lazywebexcel routingmodule is already in the context of lazywebexcel. The other module configuration is similar, so it will not be repeated.

    5. Confirm that it works normally

    We can confirm whether these modules are lazy to load through the web page tab of chrome developer tools. Click designer component lazyload, and you can see the file shown in the figure below, indicating that it is ready and the feature module is successfully loaded.


    After optimization, the first screen loading time can be effectively reduced. Also, say forroot and forchild. The CLI will put the routermodule Forroot (routes) is added to the imports array of the apprutingmodule. This will let angular know that approutingmodule is a routing module, and forroot () indicates that it is a root routing module. It configures all incoming routes, allows you to access router instructions, and registers the router.

    The CLI also converts the routermodule Forchild (routes) is added to each feature module. In this way, angular will know that this route list is only responsible for providing additional routes, and its design intention is 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, AOT compilation, etc. making good use of these technologies can improve your project performance and provide users with a better use experience.

    The above is the details of the third-party components and lazy loading technology of angular performance optimization. For more information about angular performance optimization, please pay attention to other related articles of developeppaer!

    Recommended Today

    Vue2 technology finishing 3 – Advanced chapter – update completed

    3. Advanced chapter preface Links to basic chapters: Link to component development: 3.1. Custom events of components 3.1.1. Binding custom events There are two implementation methods here: one is to use v-on with vuecomponent$ Emit implementation [PS: this method is a little similar to passing from child to parent]; The other is to use ref […]