Dynamic Imports (import())

What optimization technique is demonstrated in this code?

// Using Promise.all with dynamic imports
async function loadComponents() {
  const [header, main, footer] = await Promise.all([
    import('./components/header.js'),
    import('./components/main.js'),
    import('./components/footer.js')
  ]);
  
  return {
    renderHeader: header.render,
    renderMain: main.render,
    renderFooter: footer.render
  };
}

Sequential loading
Parallel module loading
This code demonstrates parallel module loading with dynamic imports: 1) Promise.all enables loading multiple modules concurrently rather than sequentially, 2) This reduces the total loading time when multiple modules are needed simultaneously, 3) All three components start loading at the same time rather than waiting for each to complete, 4) The await only blocks until all three modules are loaded, 5) This pattern is useful when multiple independent modules are needed for a feature, 6) It maximizes network utilization and minimizes wait time, 7) The technique can significantly improve performance for features requiring multiple modules, 8) Destructuring assignment makes the code clean and readable despite the parallel loading.
Deferred execution
Module concatenation

Next Question (20/43)