Nativescript-angular: Preloading modules are freezing the UI

[sis0k0]

_From @codeback on May 19, 2017 8:28_

We are using "lazy-loaded modules" to improve the app booting. When we tap on a "lazy-loaded module", it takes a few seconds to load (and the UI is frozen). So that, we have decided to use "Preloaded module strategy":

NativeScriptRouterModule.forRoot(<any>NSRoutes, {preloadingStrategy: PreloadModules})

The problem now is that while the user is navigating the app gets frozen.

In summary, now we get the "freezing moment" while the user is navigating the page instead of when the users tap the route of the lazy-loaded module :(.

I think a possible solution would be to make this preloading process occur in a separate thread like Nativescript does when requesting images.

_Copied from original issue: NativeScript/NativeScript#4232_

[PanayotCankov]

Hi @codeback,

Lazy loading on background is a no-go. The image background loading you refer is done in native code on the background and then the image instance is returned to the JavaScript. JavaScript itself is inherently single threaded, V8 and JSC won't allow more than one thread to work with one isolate at a time, and the slow thing in the small chunks with the modules is actually executing their JavaScript code.

There is an approach we had somewhat success with, it was to split the chunks on very small pieces, that won't take more than 200ms to load. if the modules are small enough it won't take that much time to load them when the user interacts with the UI. And then you can also try to load the modules using the nativescript-idle plugin, it fires a callback when the app is in idle state and the user is not interacting with the app (e.g. when a page loads but the user haven't yet clicked a button) it may provide a small window to load further modules unnoticed.

We are actively working on improving the {N} + Angular performance.

[EddyVerbruggen]

Btw, I hope the OP actually uses PreloadAllModules instead of PreloadModules, otherwise it wouldn't work. I must say I don't have any complaints using this approach, but the point where the preloading happens in my app is on a login screen where the app can rest for a couple of seconds (not that I know that makes a difference).

[codeback]

@EddyVerbruggen 'PreloadModules' is a custom preloader module I made. I've tried with PreloadAllModules too. In any case, thank you for pointing this out.