Lazy Loading Optional Modules

I’m in the design phase of a new app, but one of the main criteria is that the app will have optional modules. There are two use cases for this.

The first use case is that the app will have a couple of modules that would be included in a free version, however users that pay for additional features would get an updated module with more features.

The second use case would be modules that are not included at all in the free version.

I think the loading makes both of these easily possible, For instance if we had a “basic” reports module and an “advanced” reports module, it would be fairly easy to check the user permissions or abilities and lazy load the appropriate module using a simple if or switch statement, and have a fairly simple check inside the advanced module to ensure the user actually has the rights to load that module. The same could be done for totally optional modules.

However, does that solution add overhead (code size) to the main app? If so, how much?

Another solution could be to add switches to the build process so that only the appropriate modules are included in the build, but that has the disadvantage of requiring many different builds on our server and redirecting users to the appropriate build.

Are there best practices for this? What strategies have other developers used successfully, or even not successfully?

Should have added this I guess… Current plan is to use Ionic 4, angular, and capacitor if we feel they are usable when we need to start coding. The app will be a PWA, we have no plans for native versions. When I say a module I mean a page. The Free app might have 7 or 8 pages (modules), but sometime in the future there might be as many as 30 optional modules. That’s why I’m worried about any additional code added to the main app for each optional module

What do you mean by a module? An ES6 module? An NgModule? Or something else?

1 Like

Lazy loading means that code is dynamically loaded based upon the users (permitted) actions to use components contained in lazy loaded modules (angular context using decorators)

No additional switching needed/should be used as it may interfere with the underlying engine managing all this

Meaning also that all code is included in the bundle if u make a ipa or apk

For pwa this is different

So how do u plan to distribute the app?

Edited the question to include the requested info

That is radically different from what Angular and Javascript mean by module, so you might want to rethink your wording. In Angular, a page is an example of a Component.

@bgies If with modules you mean @IonicPage() (because each page ends up in its own lazy loaded module, unless you import the module in AppModule or submodules), then you could create pages like:

  name: 'basic-report'
export class BasicReportPage { ... }

  name: 'advanced-report'
export class AdvancedReportPage { ... }

And then open the page like:


onClick() {
    const pageName = this.isPremium() ? 'advanced-report' : 'basic-report';
    return this.navCtrl.push(pageName);

Take some time and work your way through the Angular Style Guide:

Become one with (grok) the following concepts:

  • Core feature module
  • Feature modules
  • Shared feature module
  • and Lazy Loaded folders

Yeah, I’ve built several Ionic apps. I now how to create and use lazy loaded pages or components. What I really want to know is how much overhead I am incurring in the main app (the pages and scaffolding that will be automatically loaded) for each optional (that may never be used by that particular user) lazy loaded page (or component if I’m not allowed to use the word module to describe them)…

You will have an increased bundle size if you are including more pages in the application. That depends on how much code you are including of course, but if you are distributing through app stores maybe the user needs to download 3.5MB instead of 3.1MB.

As long as you are lazy loading, then nothing other than the bundle size will be affected - boot time/performance shouldn’t be impacted because the code is never loaded if it isn’t accessed. If you are distributing as a PWA then the increased bundle size doesn’t really matter at all, because the additional code will never be loaded over the network.