In a large sized React SPA, I want some code chunks to be loaded when user open/using specific screen/feature.
Many our react components are lazy loaded with const Component=React.lazy(() => import('./lazyCode'))
I'd like to fetch-on-render and improve the UX delay. Due to the size and complexity of the SPA, I do not want to load any of them too early.
e.g. I want to preload next react component (and it's dependency) while the "next" is dynamic and conditional based on user input.
Webpack support ES6 import(/* webpackPrefetch: true */ './path/to/LoginModal.js'); but however, it doesn't come with an API. Actually it is unclear when the prefetch will be triggered.
I can program a import(pathToJs[i]) chain, but that does not work with <link prefetch> network priority in browser.
Webpack doesn't provide an API to get the actual URL to load, so I cannot do <link prefetch> myself either.
Is there any code pattern we could do for a managed spitted chunk lazy load?