How to Eliminate SPA Loading Delays with a Custom Webpack Preload Plugin

Problems with Conventional Lazy Loading

React.lazy loads component bundles at render time, causing noticeable delays when the bundle is large or the network is unstable.

Dynamic import() also loads resources on execution, giving fine‑grained control but still incurring asynchronous latency.

Both approaches can block rendering and produce white‑screen flashes when loading exceeds a few seconds.

Why Preloading Is Needed

Preloading requests component resources in advance, preventing delayed rendering and white‑screen flashes in SPA navigation.

Solution: route-resource-preload

The package provides:

Code splitting via a dynamic helper that wraps import(), reducing first‑screen request size.

Automatic batch preloading of component resources (Component, Module‑Federation, UMD, SVG, PNG, etc.) with customizable triggers such as hover, render, or viewport entry.

Manual preloading API similar to react‑loadable but supporting batch operations.

Support for React <Suspense> without requiring it.

Full TypeScript type inference.

Performance Results

Benchmark tests show dramatic reductions in load time:

Normal lazy‑loaded component: 184 ms → preloaded: 1 ms.

Module‑Federation component (6 assets): 405 ms → preloaded: 8 ms.

Build‑time Process

The @route-resource-preload/webpack-plugin analyzes Webpack chunks during compilation, extracts a preloadKey, module URLs, and chunk identifiers, and writes this mapping to a JSON file. The JSON can be queried at runtime to determine which chunks are preloadable and which have already been configured.

Runtime Process

At runtime, the @route-resource-preload/react package reads the generated JSON. By rendering a Preloader component or using a <PreloadLink> with the appropriate preloadKey, the related resources are fetched ahead of time via the dynamic API and then rendered when needed.

Use Cases

Opening a modal that loads a remote Module‑Federation component: with preloading the modal appears instantly; without it, users experience noticeable lag.

Offline network simulation: lazy‑loaded components fail to render, while preloaded components display correctly, demonstrating resilience to network instability.

Key Benefits

Any code can be split and preloaded, ensuring SPA performance even with large bundles.

Module‑Federation components benefit from preloading to avoid UI stutter.

Developers declare preload behavior at the page level, reducing per‑component analysis overhead.

References

Webpack plugin repository: https://github.com/AwesomeDevin/route-resource-preload/tree/main/packages/webpack-plugin

React package repository: https://github.com/AwesomeDevin/route-resource-preload/tree/main/packages/react

react‑loadable reference: https://github.com/jamiebuilds/react-loadable

Project repository: https://github.com/AwesomeDevin/route-resource-preload