Zero-Latency Micro-Frontends: Predictive Module Pre-fetching

The Context: "The Spinner Stutter"

It was early 2025. We had migrated the "Technical Nexus" portfolio to a Micro-Frontend (MFE) architecture using Module Federation. It was clean, but there was a catch: the "System Design Vault" was its own massive module, loaded on demand.

Even with a fast CDN, the first time a user clicked "Vault," they'd see a loader for 1.2 seconds while the code and data hydrated. This ruined the "immersive, premium" feel we were going for. We weren't just building a website; we were building an experience. A 1-second delay is a total baigan user experience.

The Problem Statement

On-demand loading (Code Splitting) is great for initial bundle size but terrible for interactive latency.

• Standard Prefetching (<link rel="prefetch">) is too aggressive; it downloads everything and wastes user bandwidth.
• Lazy Loading is too passive; it waits for the click and introduces latency.

We needed a "Smart Prefetcher" that predicted where the user was going based on intent signals.

Visual Architecture

+-RESETFULLSCREEN

The Core Logic / Process

We implemented a Predictive Intent Engine that runs as a lightweight utility in the main layout.

1. Hover Heuristics

Studies show that users hover over a link for an average of 300ms before clicking. We set a data-prefetch attribute on our navigation links. When a user hovers over a link for >150ms, we trigger a low-priority fetch() for that module's entry point.

2. Cursor Velocity Vectoring

This is where it gets advanced. We track the (x, y) velocity of the mouse. If the cursor is moving rapidly towards the "Arcade" or "Vault" nav icons, we trigger the prefetch even before the hover. We use a simple geometric algorithm to see if the cursor's trajectory intersects with a nav element's bounding box.

3. Service Worker Coordination

To prevent the main thread from lagging, the Prefetcher doesn't call import(). Instead, it sends a message to a Service Worker:

// main.js
navigator.serviceWorker.controller.postMessage({
  type: "PREFETCH_MODULE",
  url: "/vault/remoteEntry.js",
});

The Service Worker fetches the file and stores it in the CacheStorage API. When the user finally clicks, the browser's module loader finds the entry in the cache instantly.

The "Baigan" Take (Expert Insights)

Many "Performance Gurus" love guess.js (predictive prefetching based on Google Analytics data). It's clever, but for a high-intensity interactive dashboard, it's total baigan. Why? Because analytics data is historical. User intent is real-time.

The baigan trap here is "Prefetch Flooding." If you prefetch every time a user sweeps their mouse across the screen, you'll saturate their 4G connection and actually make the current page feel slow because you're competing for the same network bandwidth.

You must implement a Token Bucket for Prefetching. Each page session gets N prefetch tokens. Once they are spent, no more prefetching occurs until a certain amount of time has passed or the user stays on a page long enough to "recharge."

Performance Checklist

• Wrap the intent engine in a requestIdleCallback to ensure it never blocks the main UI thread.
• Use Network Information API to disable prefetching on "Slow-2G" or "Save-Data" modes.
• Implement a IntersectionObserver to only prefetch modules when the navigation icons are actually visible on screen.
• Use fetchpriority="low" for prefetch requests to ensure they don't block critical CSS or JS loading.