Modular Architecture

Dynamic Imports & Code Splitting

Modern web performance is defined by what you *don't* load. Master the `import()` expression to implement lazy-loading, reduce bundle sizes, and create ultra-responsive interfaces.

The Cost of Static Cargo

Standard `import` statements at the top of your files areStatic. This means even if a user never opens your "Settings" panel, they still download the 100kb of code required to power it. Dynamic imports allow you to break your application into logical "chunks" that are fetched only upon request.

JAVASCRIPT

// âŒ Static Import (Synchronous/Blocking)
import { heavilyLoaded } from './heavy-module.js';

// âœ… Dynamic Import (Asynchronous/Non-blocking)
async function initializeFeature() {
    try {
        const { heavilyLoaded } = await import('./heavy-module.js');
        heavilyLoaded();
    } catch (err) {
        console.error('Module failed to load', err);
    }
}

The Pragmatic Loader Pattern

Directly calling `import()` everywhere can lead to redundant network requests or messy error handling. A Pragmatic Loaderwraps the native API to provide caching, retry logic, and centralized error reporting.

JAVASCRIPT

// --- The Pragmatic Loader Pattern ---
const Loader = {
    _cache: new Map(),

    async load(modulePath) {
        if (this._cache.has(modulePath)) return this._cache.get(modulePath);

        const promise = import(modulePath).catch(err => {
            this._cache.delete(modulePath); // Evict failure from cache
            throw err;
        });

        this._cache.set(modulePath, promise);
        return promise;
    }
};

// Usage in UI
button.onclick = () => Loader.load('/modules/chart.js');

Predictive Loading

Dynamic loading often introduces a "loading lag." To eliminate this, we use Predictive Prefetching. By listening for high-intent signals (like a mouse hover over a link), we can start the download before the user even clicks the button.

JAVASCRIPT

// --- Predictive Prefetching ---
const link = document.querySelector('#admin-link');

link.addEventListener('mouseenter', () => {
    // Start download while user hovers (usually ~200ms before click)
    import('./pages/AdminDashboard.js');
}, { once: true });

Technical Insight: Network Priority

Standard imports have the highest priority in the browser's network queue. Dynamic imports have a lower priority by default. You can influence this behavior in tools like Webpack using magic comments like /* webpackPreload: true */.

Code Splitting Strategy:

âœ… **Route-Based:** Split code by URL (e.g., /home, /admin).
âœ… **Interaction-Based:** Load heavy libraries (Charts, Editors) only when active.
âœ… **Polyfills:** Only load compatibility code for older browsers.
âœ… **Error Boundaries:** Always wrap dynamic imports in try/catch blocks.
âŒ **Micro-Splitting:** Avoid splitting files smaller than 5kb; the HTTP overhead outweighs the benefit.

Defensive Programming

Now that our modules are loading efficiently, let's ensure they handle errors robustly.

Next: Error Handling & Try/Catch â†’