All 10 ES Modules questions
More in ES Modules
What's the difference between a named export and a default export? How do you import everything from a module under one namespace object? What's the difference between ES Modules and CommonJS (require/module.exports)? What is tree-shaking and why does it require ES Module syntax? Why are ES Module imports 'hoisted' and evaluated before the rest of the module's code runs? What does 'live binding' mean for ES Module exports, and how does it differ from CommonJS? How does top-level await work, and what constraint does it place on modules that import that module? What are import maps and what problem do they solve for browser-native ES Modules? Why can circular module imports (Module A imports B, which imports A) cause subtle bugs?
Advertisement
JavaScript › ES Modules

How do dynamic imports (import()) differ from static import statements?

Intermediate

Answer

import() is a function-like expression that returns a Promise resolving to the module, and can be called anywhere at runtime — including conditionally — unlike static import which must appear at the top level and is resolved before any code runs.
button.addEventListener('click', async () => {
  const { openModal } = await import('./modal.js');
  openModal();
});
Real-world example Lazy-loading a heavy chart library only when the user navigates to a page that actually needs it.

Common follow-ups: How does this enable code-splitting in bundlers like Webpack or Vite?

Package Management Bundlers & Transpilation (npm Webpack/Vite Babel)
All 10 ES Modules questions