Suggest an edit

Improve this article

Refine the answer for “Dynamic import”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What dynamic import is

**Dynamic import** is a call to the `import()` function, which **returns a Promise** and lets you load modules **at runtime**, rather than at build time.

Example:

```javascript
// Dynamic import
const module = await import('./utils.js');
module.sayHello();
```

Difference from a static import:

```javascript
// Static import
import { sayHello } from './utils.js';
```

With a static import, the entire module loads immediately at startup.
With a dynamic one, it loads only when it's actually needed.

---

## Syntax

```javascript
import(modulePath)
  .then(module => {
    // the module is loaded
    module.default();
  })
  .catch(err => console.error(err));
```

or with `await`:

```javascript
const module = await import('./math.js');
const { sum } = module;
console.log(sum(2, 3));
```

---

## What `import()` returns

`import()` returns a **Promise** that resolves with the module object:

```javascript
// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14;
```

```javascript
const math = await import('./math.js');
console.log(math.add(2, 3)); // 5
console.log(math.PI);        // 3.14
```

---

## Example: conditional import

You can dynamically load different modules depending on the situation:

```javascript
if (navigator.language.startsWith('fr')) {
  const messages = await import('./lang/fr.js');
  console.log(messages.default.hello);
} else {
  const messages = await import('./lang/en.js');
  console.log(messages.default.hello);
}
```

This is great for **multilingual interfaces**, **plugins**, **heavy dependencies**, and **lazy loading of pages**.

---

## Example: handling load errors

```javascript
try {
  const module = await import('./missing.js');
} catch (err) {
  console.error('Error loading the module:', err);
}
```

---

## Example: loading on a user action

```javascript
button.addEventListener('click', async () => {
  const { openModal } = await import('./modal.js');
  openModal();
});
```

The `modal.js` module will load **only on the first click**,
not when the site starts - saving traffic and speeding up startup.

---

## Dynamic import with variables

You can use **dynamic paths**, which is impossible with static imports:

```javascript
const theme = 'dark';
const module = await import(`./themes/${theme}.js`);
module.applyTheme();
```

Important: the bundler (for example, Webpack) still needs to be able to **predict the path pattern** - otherwise it won't include the required files in the build.

---

## When to use dynamic import

| Scenario | Why it's useful |
|---|---|
| **Lazy loading components** | Load a component only when navigating to the page that needs it |
| **Translations / localization** | Import the required language dynamically |
| **Heavy dependencies** | Deferred loading of large libraries (`chart.js`, `moment`, `three.js`) |
| **Plugins / modular architecture** | Load functionality on demand |
| **SSR + Code splitting** | In Next.js, Vite, Webpack - automatic bundle splitting |
| **Feature flags / A/B tests** | Load different modules depending on a flag |

---

## How it works under the hood

Bundlers (Webpack, Rollup, Vite, ESBuild):

1. Analyze `import('./path')` expressions.
2. Do **code splitting** - split the project into chunks.
3. Load the required chunk over the network when `import()` is called.

Example (Webpack output):

```javascript
main.js          (main code)
vendors~chart.js (library)
chart.js         (loads on click)
```

---

## Difference from `require()`

| Criterion | `import()` | `require()` |
|---|---|---|
| Type | Asynchronous (Promise) | Synchronous |
| Works in | ESM (browser, Node) | CommonJS (Node) |
| Can be used dynamically | Yes | Limited |
| Supports tree-shaking | Yes | No |
| Supported by bundlers (code-splitting) | Yes | No |

---

## Example: in React / Next.js

```javascript
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return (
    <div>
      <h1>Data</h1>
      <Chart />
    </div>
  );
}
```

The `<Chart>` component will load **only in the browser**,
and **only when the user opens the page**.

---

## Summary

| What it does | Loads modules asynchronously (on demand) |
|---|---|
| Returns | A Promise with the module object |
| Works in | ES Modules (Node, browser) |
| Used for | Lazy loading, code splitting, A/B tests, dynamic localization |
| Syntax | `const module = await import('./file.js')` |

---

**The main idea:**

> Dynamic import is "lazy" module loading.
> Instead of shipping the whole application at once, you load only what's needed, when it's needed.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts695 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.