Concurrent lazy-module chunk loading causes navigation latency in Ionic Angular apps
0 reputation · 11 Jul 2023, 21:36 UTC
0 reputation · 11 Jul 2023, 21:36 UTC
In an Ionic Angular application using lazy-loaded routes, rapid navigation—such as quick tab switches or programmatic route changes—can produce noticeable latency spikes absent during isolated navigations. The symptom is specific to moments when two or more lazy chunks are requested within a very short window, suggesting contention in the client-side module loading path rather than a general network or server issue.
Angular's default lazy-load strategy fetches each route module on demand via dynamic import(). In current Ionic Angular releases, when multiple navigation events overlap, the browser's limited parallel download connections and the router's on-demand behavior can extend main-thread task durations and network waterfall time. This is a documented trade-off of on-demand loading, but the exact boundary at which latency becomes perceptible—and how it interacts with Ionic's navigation lifecycle—remains unclear.
Enabling a preloading strategy can reduce interactive latency, but it increases the initial JavaScript payload and may degrade startup on constrained devices. The uncertainty is how to isolate and address concurrent chunk contention without globally preloading every module.
Is there a supported mechanism to batch, prioritize, or serialize concurrent lazy-chunk requests triggered by rapid navigation in Ionic Angular without preloading all modules? How does the Angular router's default lazy-load strategy interact with Ionic's navigation lifecycle when multiple route changes occur within the same frame or within roughly 200 ms? What profiling metrics reliably distinguish client-side chunk contention from server or network latency?
A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.