Dynamic import

Basic Concepts of Dynamic Import

The dynamic import feature introduced in ECMAScript 11 (ES2020) revolutionized module loading. Traditional static import statements must be used at the top level of a module, whereas dynamic import() allows modules to be loaded on-demand at runtime. This function returns a Promise that resolves to the namespace object of the requested module.

// Static import
import { utils } from './utils.js';

// Dynamic import
const modulePromise = import('./utils.js');
modulePromise.then(module => {
  console.log(module.utils);
});

Syntax and Return Value

Dynamic imports use the import() operator, which resembles a function call in syntax but is actually a special syntactic construct. It can appear anywhere in the code, including conditional statements, function bodies, or event handlers.

button.addEventListener('click', async () => {
  const helpers = await import('./helpers.js');
  helpers.doSomething();
});

The return value is always a Promise object, meaning it can be handled using .then()/.catch() or async/await. The resolved module object contains all exports, with default exports placed under the default property.

Practical Use Cases

Code Splitting and On-Demand Loading

Modern frontend frameworks commonly use dynamic imports for route-level code splitting:

// React route configuration
const Home = React.lazy(() => import('./views/Home'));
const About = React.lazy(() => import('./views/About'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

Conditional Loading of Localization Resources

Load language packs dynamically based on user preferences:

async function loadLocale(lang) {
  try {
    const localeData = await import(`./locales/${lang}.js`);
    i18n.activate(localeData);
  } catch (err) {
    console.error('Failed to load language pack:', err);
    const fallback = await import('./locales/en-US.js');
    i18n.activate(fallback);
  }
}

// Load based on browser language settings
loadLocale(navigator.language);

Feature Detection and Fallbacks

Load non-core features only after environment support is confirmed:

if ('IntersectionObserver' in window) {
  const observerPolyfill = await import('intersection-observer-polyfill');
  // Use enhanced observer
} else {
  // Fall back to basic implementation
}

Advanced Techniques

Dynamic Path Construction

Combine with template strings for flexible module paths:

const featureName = 'analytics';
const module = await import(`./features/${featureName}.js`);

Batch Dynamic Imports

Use Promise.all to load multiple modules in parallel:

const [moduleA, moduleB] = await Promise.all([
  import('./moduleA.js'),
  import('./moduleB.js')
]);

Webpack Magic Comments

Bundler-specific comments can optimize dynamic import behavior:

// Name the generated chunk
const module = await import(/* webpackChunkName: "my-chunk" */ './module.js');

// Prefetch hint
const module = await import(/* webpackPrefetch: true */ './module.js');

Error Handling

Dynamic imports may fail due to network issues or missing modules, requiring robust error handling:

try {
  const module = await import('./non-existent.js');
} catch (error) {
  console.error('Module loading failed:', error);
  // Load fallback module
  const fallback = await import('./fallback.js');
}

Performance Considerations

While dynamic imports reduce initial load size, note:

1. Too many small modules may diminish HTTP/2 multiplexing advantages
2. Frequent requests on mobile networks can degrade user experience
3. Implement preloading and prefetching strategies appropriately

// Preload potentially needed modules during idle time
requestIdleCallback(() => {
  import('./likely-needed-later.js');
});

Comparison with Static Imports

Browser and Bundler Support

All modern browsers natively support dynamic imports. For older environments, bundlers are required:

• Webpack supports it since v2
• Rollup needs @rollup/plugin-dynamic-import-vars for variable paths
• Babel requires @babel/plugin-syntax-dynamic-import

// Webpack configuration example
module.exports = {
  experiments: {
    topLevelAwait: true  // Allow top-level await for dynamic imports
  }
};

Real-World Integration Example

Combine with Vue 3's Composition API for on-demand loading:

// Async component factory
function asyncComponent(loader) {
  return defineAsyncComponent({
    loader,
    loadingComponent: LoadingSpinner,
    errorComponent: ErrorDisplay,
    delay: 200,
    timeout: 3000
  });
}

// Route configuration
const routes = [
  {
    path: '/dashboard',
    component: asyncComponent(() => import('./views/Dashboard.vue'))
  }
];

Node.js Environment Differences

Behavior differs slightly in server-side environments:

// Load built-in modules
const fs = await import('node:fs');

// Handle file paths
const path = './lib/' + (process.env.NODE_ENV === 'production' ? 'prod' : 'dev');
const utils = await import(path);

Security Considerations

Mitigate risks when using dynamic imports:

1. Avoid directly concatenating user input as module paths
2. Validate dynamic paths against a whitelist
3. Consider Content Security Policy (CSP) restrictions

// Unsafe approach
const userInput = req.query.module;
const dangerous = await import(`./${userInput}.js`);

// Safe approach
const ALLOWED = ['a', 'b', 'c'];
if (ALLOWED.includes(userInput)) {
  const safe = await import(`./${userInput}.js`);
}