Dynamic Imports (import())

What optimization technique is demonstrated in this preload code?

// preload.js
function preloadRoutes() {
  // Start loading but don't wait for completion
  import('./pages/about.js');
  import('./pages/contact.js');
}

// When user hovers over navigation
navEl.addEventListener('mouseenter', preloadRoutes);

Bundle analysis
Speculative loading
This code demonstrates speculative loading (sometimes called preloading) using dynamic imports: 1) It triggers the loading of modules based on user interaction hints (hovering over navigation), 2) The imports are started but not awaited, allowing them to load in the background, 3) This anticipates user actions to improve perceived performance, 4) When the user actually navigates to these routes, the modules may already be loaded or loading, 5) This technique reduces wait time for subsequent user interactions, 6) It balances resource usage by only preloading when there's a strong indication of need, 7) The technique can significantly improve user experience for common navigation paths, 8) This pattern is often used in sophisticated web applications to create smoother user experiences.
Request prioritization
Critical path rendering

Next Question (14/43)