Lazy Loading & Code Splitting

How can you implement intelligent prefetching for lazy-loaded modules?

const prefetchComponent = () => {
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.as = 'script';
  link.href = '/js/feature.chunk.js';
  document.head.appendChild(link);
};

document.addEventListener('mouseover', (e) => {
  if (e.target.matches('.feature-link')) {
    prefetchComponent();
  }
});

Load all modules at startup
Never use prefetching
Prefetch based on user interactions and patterns
Intelligent prefetching based on user interactions and patterns is the most effective approach because: 1) It anticipates user needs based on actual behavior, 2) Optimizes resource usage by only prefetching likely-to-be-needed modules, 3) Improves perceived performance by loading resources before they're explicitly requested, 4) Balances performance with bandwidth usage. The example code shows how to implement prefetching based on user hover interactions, but this can be extended to include other signals like scroll position, navigation patterns, or historical usage data. This approach provides the best balance between performance optimization and resource efficiency.
Always prefetch on page load

Next Question (11/20)