Dynamic Imports (import())

What pattern is implemented in this code using dynamic imports?

// polyfill.js
async function loadPolyfill() {
  if (!window.fetch) {
    await import('whatwg-fetch');
    console.log('Fetch polyfill loaded');
  }
}

// Initialize application
await loadPolyfill();
fetch('/api/data').then(/* ... */);

Progressive enhancement
This code implements progressive enhancement using dynamic imports: 1) It checks if a feature (fetch) is natively supported in the browser, 2) A polyfill is only loaded if the feature is missing, 3) Modern browsers don't load the unnecessary polyfill code, 4) This reduces bundle size for the majority of users with modern browsers, 5) It ensures compatibility across different browser environments, 6) This approach respects the principle of only loading what's needed, 7) It's a common pattern for conditionally loading compatibility code, 8) This technique ensures optimal performance while maintaining wide browser support.
Progressive rendering
Graceful degradation
Response splitting

Next Question (16/43)