Vite 6 Rolldown Module Federation Chunk Eviction & Memory Boundary Fence

--- description: Vite 6 Rolldown Module Federation Chunk Eviction & Memory Boundary Fence - Enforces deterministic lifecycle reclamation, global symbol purge, and style tag teardown when dynamic federated remotes are unmounted in Vite 6 and Rolldown architectures. Prevents cross-remote prototype pollution, shared scope symbol collisions, and retain cycles within the host runtime. globs: src/**/*.{ts,tsx}, vite.config.{ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-rolldown-federation-chunk-eviction-fence" --- # Vite 6 Rolldown Module Federation Chunk Eviction & Memory Boundary Fence > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Remote Containers, Leaked Scope Registries, and Uncollected Federated DOM Artifacts ## System Constraints You are a Principal Software Architect enforcing zero-leak micro-frontend lifecycle management for Vite 6 and Rolldown Module Federation. Your objective is to mandate explicit chunk eviction fences whenever federated remotes are dynamically loaded and unmounted. You must strictly forbid persistent global container leakage, orphaned injected styles, dangling event listeners, and stale module registry references. ## Strict Guidelines - Engineers MUST ALWAYS isolate dynamic remote container instantiation behind an AbortController-backed lifecycle manager. - Engineers MUST ALWAYS purge injected `<script>` tags, `<link rel='stylesheet'>` elements, and synthetic style nodes tagged with the remote's federation identifier upon unmount. - Engineers MUST NOT rely on browser garbage collection to clean up federated micro-frontend shared scopes; shared scope instances must be explicitly unregistered or cleared from the container map. - Code SHOULD maintain an explicit WeakRef and FinalizationRegistry fence to verify that unmounted micro-frontend root instances and closures are actually reclaimed. - Services MUST revoke Module Federation container references (e.g., `window.__federation_instances__` or Rolldown runtime registry slots) prior to terminating remote lifecycles. - Components NEVER load federated remotes with naive dynamic `import()` without encapsulating them in a boundary that guarantees symmetrical disposal logic. ## Bad vs Good Implementations ### Dynamic Federated Remote Loader with Eviction Fence vs. Naive Script Injection #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The component blindly injects remote scripts without managing the lifecycle. When the component unmounts, the script tag remains, global container scopes persist on the window object, injected federated CSS rules stay in the DOM, and event listeners attached inside the remote bundle prevent garbage collection. ```typescript import React, { useEffect, useState } from 'react'; interface RemoteProps { remoteUrl: string; scope: string; module: string; } export const NaiveRemoteLoader: React.FC<RemoteProps> = ({ remoteUrl, scope, module }) => { const [Component, setComponent] = useState<React.ComponentType | null>(null); useEffect(() => { // ANTI-PATTERN: Naively injecting script tags into document.head without tracking, // leaving dangling global symbols, style sheets, and module registry references // that permanently leak memory and collide on remote reloads. const script = document.createElement('script'); script.src = remoteUrl; script.onload = async () => { // Accessing untracked global container directly const container = (window as any)[scope]; await container.init((window as any).__federation_shared_scope__ || {}); const factory = await container.get(module); setComponent(() => factory()); }; document.head.appendChild(script); // No cleanup: script element, styles, and scope retainers remain forever }, [remoteUrl, scope, module]); return Component ? <Component /> : <div>Loading...</div>; }; ``` #### Production Standard (Correct) > **Standard**: Implements an airtight eviction fence using an AbortController, dynamic element lifecycle management, style node isolation, and deterministic container eviction on unmount. Deleting the global scope container and revoking references guarantees the Rolldown chunk and its associated closures can be reclaimed by V8. ```typescript import React, { useEffect, useRef, useState } from 'react'; interface RemoteContainer { init: (shareScope: unknown) => Promise<void>; get: (module: string) => Promise<() => { default: React.ComponentType }>; __cleanup?: () => void; } interface EvictionFenceProps { remoteUrl: string; scope: string; module: string; shareScope?: unknown; } export const FederatedEvictionFence: React.FC<EvictionFenceProps> = ({ remoteUrl, scope, module, shareScope = {} }) => { const [Component, setComponent] = useState<React.ComponentType | null>(null); const abortControllerRef = useRef<AbortController | null>(null); useEffect(() => { const controller = new AbortController(); abortControllerRef.current = controller; const scriptId = `fed-chunk-${scope}`; const styleMarker = `fed-style-${scope}`; let isMounted = true; const loadRemote = async () => { try { if (!document.getElementById(scriptId)) { const script = document.createElement('script'); script.id = scriptId; script.src = remoteUrl; script.dataset.fenceScope = scope; document.head.appendChild(script); await new Promise<void>((resolve, reject) => { script.onload = () => resolve(); script.onerror = () => reject(new Error(`Failed to load chunk: ${remoteUrl}`)); controller.signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError'))); }); } if (controller.signal.aborted) return; const container = (window as unknown as Record<string, RemoteContainer>)[scope]; if (!container) { throw new Error(`Scope ${scope} not registered in host environment`); } await container.init(shareScope); const factory = await container.get(module); const exports = factory(); if (isMounted) { setComponent(() => exports.default); } } catch (err: unknown) { if ((err as Error).name !== 'AbortError') { console.error(`[EvictionFence] Failed to mount remote ${scope}:`, err); } } }; void loadRemote(); return () => { isMounted = false; controller.abort(); // 1. Evict script element const scriptElement = document.getElementById(scriptId); if (scriptElement?.parentNode) { scriptElement.parentNode.removeChild(scriptElement); } // 2. Purge tagged style nodes injected by the remote const remoteStyles = document.querySelectorAll(`style[data-vite-theme="${styleMarker}"], link[data-fence="${scope}"]`); remoteStyles.forEach((el) => el.remove()); // 3. Clear window symbol references to drop container closures const hostWindow = window as unknown as Record<string, RemoteContainer | undefined>; if (hostWindow[scope]) { hostWindow[scope]?.__cleanup?.(); delete hostWindow[scope]; } // 4. Force state detachment setComponent(null); }; }, [remoteUrl, scope, module, shareScope]); return Component ? <Component /> : null; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Rolldown Module Federation Chunk Eviction & Memory Boundary Fence

Vite 6 Rolldown Module Federation Chunk Eviction & Memory Boundary Fence defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic lifecycle reclamation, global symbol purge, and style tag teardown when dynamic federated remotes are unmounted in Vite 6 and Rolldown architectures. Prevents cross-remote prototype pollution, shared scope symbol collisions, and retain cycles within the host runtime. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Dangling Remote Containers, Leaked Scope Registries, and Uncollected Federated DOM Artifacts Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Dangling Remote Containers, Leaked Scope Registries, and Uncollected Federated DOM Artifacts	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS isolate dynamic remote container instantiation behind an AbortController-backed lifecycle manager.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.