การดึงข้อมูลล่วงหน้าและการโหลดล่วงหน้าสำหรับไมโครฟรอนต์เอนด์

Lazy loading saves the initial load but adds a wait when the user first visits an MFE. Prefetching closes that gap by fetching likely-needed bundles in advance.

The browser offers two hints:

• preload: fetch now, high priority, needed soon
• prefetch: fetch when idle, low priority, maybe needed later

You can hint the browser directly with link tags, letting it fetch an MFE bundle during idle time.

A powerful trick: start fetching an MFE when the user hovers a link, well before they click. The bundle is often ready by the time the click lands.

Because Module Federation uses dynamic import(), calling it early (without using the result) warms the cache for later.

Fetch the most likely next MFE once the initial page is interactive, using idle time so it never competes with critical content.

Use analytics to learn common navigation paths. If most users go from home to products, prefetch the products MFE right after the home page loads.

Prefetching everything wastes bandwidth and battery, especially on mobile. Prefetch only high-probability destinations, and respect data-saver settings.

Preloading shared libraries (like React) used by upcoming MFEs further smooths transitions, since the shared chunk is already cached when the MFE mounts.

Track the time from navigation intent to MFE-rendered. Effective prefetching should noticeably shrink this metric in real-user monitoring.

Combine techniques: preload the next MFE on hover, prefetch the single most likely route on idle, and skip prefetch on constrained networks.

You learned to prefetch micro frontends:

• Prefetch fills the wait that lazy loading leaves
• Use preload (soon) vs prefetch (maybe later)
• Fetch on hover/intent and during idle time
• Predict routes from analytics
• Avoid over-prefetching on slow networks

Smart prefetching makes MFE navigation feel instant.