How to improve angular performance with webpack or demand loading?

Asked

Viewed 182 times

4

I have a large project with angular and need to leave the pages loading with a good performance, at first I set up a Customized Webpack for the application. But by applying it the downloaded files remain large reaching 14mb of upload.

One possibility found is to configure a loadChildren on the routes to load only the components of that page, i.e., load on demand. There would be some way to do this outside the routes?

For now the loading of the components are being ugly in the file app.module.ts,a suggested possibility was to implement a way to declare a @NgModule by component as dependency or create a module.export for each of the pages containing its individual load dependencies.

angular webpack

  • when building your application you used the Prod flag?

  • Yes, I used but my doubt would be how to properly configure the webpack or the angular to load only the components used. Whether it is recommended to Create a .module.js file for each interface instead of app.module.ts. So far only found examples using an import file or by routes

1 answer

1


To organize an Angular application, the appropriate form is a good structuring of its modules. They should be divided into App, Core, Share and Features.

The App, Shared and Core should be the only ones to be loaded at the beginning of the application. From there as the user navigates, the Features modules will be loaded by Router.

You can’t get away from it, load modules without being on the route, it will be reinventing the wheel, although it is possible to load a module in the race. It would be necessary to cheat the ng builder for him to think that it is the declaration of a route.

export const lazyModules = {
    feature: {
        loadChildren: () => import('../../feature/feature.module').then(m => m.FeatureModule)
    }
}
......

constructor(private injector: Injector, private compiler: Compiler) 

......

lazyModules.feature.loadChildren().then(async (m) => {
    const ng = m instanceof NgModuleFactory ? 
        m : await this.compiler.compileModuleAsync(moduleOrFactory)

    ng.create(this.injector)
});

ps: I converted this code from an Ngrx effect, so it should be necessary some ajutes.

Anyway, this is certainly not the way, it is worth checking out this article by Tomas Trajan:

How to Architect Epic Angular app in Less than 10 minutes!.

Then yes, you will be configuring your application in a modularized and performance-oriented way.

But remember performance in Angular should not be limited to Charge per Demand, a good state management is key, separating components between Smart and Dummy.

Finally, one last tip, take a look at this Schematics project I’m developing:

angular-mat-Baum

I hope you like!

Hugs,
Bernardo Baumblatt.

Browser other questions tagged angular webpack

You are not signed in. Login or sign up in order to post.