Dynamic Imports (import())

What modern JavaScript module feature enables this pattern?

// Combining dynamic imports with top-level await
// (In an ES module)
const userLocale = navigator.language.split('-')[0] || 'en';

// Dynamically import the appropriate translation
const translations = await import(`./locales/${userLocale}.js`);

// App can use translations immediately
document.querySelector('#welcome').textContent = 
  translations.messages.welcome;

Module namespace
Top-level await
This pattern is enabled by top-level await in ES modules: 1) Top-level await allows using await outside of async functions at the module level, 2) This allows modules to perform asynchronous initialization before being considered fully loaded, 3) The importing module will wait for this module to complete its dynamic import, 4) This enables cleaner code for modules that depend on asynchronously loaded resources, 5) The feature is particularly useful for resources that vary by user context, like translations, 6) It eliminates the need for complex initialization patterns or wrappers, 7) The module exports are guaranteed to be ready when the module is imported, 8) This represents the evolution of JavaScript modules to better handle asynchronous dependencies.
Module preloading
Static analysis

Next Question (28/43)