Module 42 // Core JavaScript

Dynamic Imports

Module Objective

import(), lazy loading, code splitting

Mental Model Realtime Simulation

INTERACTIVE_CANVAS

Editor_Pane

Console_Output

Waiting for output...

Practical Code Examples

// Example 1

// 1. Lazy Loading Features
async function openEditor() {
  console.log("Loading heavy editor logic...");
  const { initEditor } = await import('./heavyEditor.js');
  initEditor();
}

// openEditor() only runs when the user clicks a button

💡 Dynamic imports allow you to keep your initial bundle small. You only download the code for 'heavy' features if the user actually needs them.

// Example 2

// 2. Destructuring Exports
async function compute() {
  // Directly grab what you need
  const { add, subtract } = await import('./math.js');
  console.log(add(5, 10));
}

💡 The imported module object behaves like a standard namespace object, allowing you to destructure its exports easily.

// Example 3

// 3. Error Handling
async function safeLoad() {
  try {
    const mod = await import('./missing.js');
  } catch (err) {
    console.log("Module failed to load (Network error?)", err);
  }
}

💡 Because dynamic imports return a Promise, you can catch network failures or 404 errors using standard `try/catch`.

Engine & Memory Architecture

On-Demand Allocation

1. Network Fetch:

When import() is called, the Browser Engine initiates a network request.
The code is fetched and parsed into the Bytecode in the Heap.

2. Module Graph:

The engine links the dynamically loaded module into the existing Module Map in RAM.
If the module was already loaded elsewhere, it returns the cached singleton reference.

3. Memory Efficiency:

By delaying the load, you reduce the Initial Heap Size of your application.
Hardware: This speeds up the "Time to Interactive" (TTI) because the CPU has less code to parse and execute during the critical startup phase.

PREVIOUS_MODULEGenerators & Async Iteration NEXT_MODULE ECMAScript Internals