> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# import()

> Dynamic imports for code splitting and lazy loading in webpack

The `import()` syntax enables dynamic module loading and is webpack's primary mechanism for code splitting.

## Syntax

```javascript theme={null}
import(modulePath)
import(modulePath, options)
```

### Parameters

<ParamField path="modulePath" type="string" required>
  Path to the module to import. Can be a string literal or template literal.

  ```javascript theme={null}
  import('./module.js')
  import(`./locale/${language}.js`)
  ```
</ParamField>

<ParamField path="options" type="object">
  Import attributes (formerly assertions) for the module.

  ```javascript theme={null}
  import('./data.json', { assert: { type: 'json' } })
  ```
</ParamField>

### Return Type

**Returns:** `Promise<Module>`

Returns a Promise that resolves to the module namespace object.

***

## Basic Usage

### Simple Dynamic Import

```javascript theme={null}
// Dynamically load a module
import('./math.js')
  .then(module => {
    console.log(module.add(2, 3)); // 5
  })
  .catch(err => {
    console.error('Failed to load module:', err);
  });
```

### With Async/Await

```javascript theme={null}
async function loadModule() {
  try {
    const module = await import('./math.js');
    console.log(module.add(2, 3)); // 5
  } catch (err) {
    console.error('Failed to load module:', err);
  }
}
```

### Named Exports

```javascript theme={null}
// math.js
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

// app.js
const { add, multiply } = await import('./math.js');
console.log(add(2, 3));      // 5
console.log(multiply(2, 3)); // 6
```

### Default Export

```javascript theme={null}
// logger.js
export default class Logger {
  log(message) {
    console.log(message);
  }
}

// app.js
const { default: Logger } = await import('./logger.js');
const logger = new Logger();
logger.log('Hello!');
```

***

## Code Splitting

### Webpack Magic Comments

Webpack supports special comments to configure chunk behavior:

```javascript theme={null}
import(
  /* webpackChunkName: "my-chunk" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  './module.js'
)
```

#### Available Magic Comments

<ParamField path="webpackChunkName" type="string">
  Name for the generated chunk.

  ```javascript theme={null}
  import(/* webpackChunkName: "lodash" */ 'lodash')
  // Generates: lodash.bundle.js
  ```
</ParamField>

<ParamField path="webpackMode" type="string">
  Mode for resolving dynamic imports.

  **Values:** `lazy` (default) | `lazy-once` | `eager` | `weak`

  ```javascript theme={null}
  // Create separate chunk for each module
  import(/* webpackMode: "lazy" */ `./locale/${lang}.js`)

  // Bundle all possible modules into one chunk
  import(/* webpackMode: "lazy-once" */ `./locale/${lang}.js`)

  // No separate chunk, include in main bundle
  import(/* webpackMode: "eager" */ './module.js')
  ```
</ParamField>

<ParamField path="webpackPrefetch" type="boolean">
  Prefetch the chunk when browser is idle.

  ```javascript theme={null}
  import(/* webpackPrefetch: true */ './future-feature.js')
  // Adds: <link rel="prefetch" href="future-feature.js">
  ```
</ParamField>

<ParamField path="webpackPreload" type="boolean">
  Preload the chunk in parallel with parent chunk.

  ```javascript theme={null}
  import(/* webpackPreload: true */ './critical.js')
  // Adds: <link rel="preload" href="critical.js">
  ```
</ParamField>

<ParamField path="webpackInclude" type="RegExp">
  Include only modules matching this pattern.

  ```javascript theme={null}
  import(
    /* webpackInclude: /\.json$/ */
    `./data/${file}`
  )
  ```
</ParamField>

<ParamField path="webpackExclude" type="RegExp">
  Exclude modules matching this pattern.

  ```javascript theme={null}
  import(
    /* webpackExclude: /\.test\.js$/ */
    `./components/${name}.js`
  )
  ```
</ParamField>

<ParamField path="webpackExports" type="string | array">
  Import only specific exports to reduce bundle size.

  ```javascript theme={null}
  import(
    /* webpackExports: ["add", "subtract"] */
    './math.js'
  )
  ```
</ParamField>

***

## Advanced Patterns

### Lazy Loading Routes

```javascript theme={null}
const routes = [
  {
    path: '/home',
    component: () => import(/* webpackChunkName: "home" */ './Home.vue')
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ './About.vue')
  }
];
```

### Conditional Loading

```javascript theme={null}
async function loadFeature(featureName) {
  if (featureName === 'advanced') {
    const module = await import(
      /* webpackChunkName: "advanced-features" */
      './features/advanced.js'
    );
    return module.default;
  } else {
    const module = await import(
      /* webpackChunkName: "basic-features" */
      './features/basic.js'
    );
    return module.default;
  }
}
```

### Dynamic Import with Variables

```javascript theme={null}
// Load locale files dynamically
async function loadLocale(language) {
  const locale = await import(
    /* webpackChunkName: "locale-[request]" */
    `./locales/${language}.json`
  );
  return locale.default;
}

// Usage
const messages = await loadLocale('en-US');
```

### Error Handling with Retry

```javascript theme={null}
async function importWithRetry(modulePath, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await import(modulePath);
    } catch (err) {
      if (i === retries - 1) throw err;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

// Usage
const module = await importWithRetry('./heavy-module.js');
```

***

## Import Attributes

Import attributes (formerly assertions) specify the expected module type:

```javascript theme={null}
// JSON modules
const config = await import('./config.json', {
  assert: { type: 'json' }
});

// CSS modules
const styles = await import('./styles.css', {
  assert: { type: 'css' }
});
```

<Note>
  Import attributes syntax is evolving. Webpack supports both `assert` and `with` keywords.
</Note>

***

## Performance Considerations

### Prefetch vs Preload

```javascript theme={null}
// Prefetch: Low priority, loaded when browser is idle
import(/* webpackPrefetch: true */ './optional-feature.js')

// Preload: High priority, loaded in parallel
import(/* webpackPreload: true */ './critical-feature.js')
```

**When to use:**

* **Prefetch**: For features likely to be needed soon (future navigation)
* **Preload**: For features needed in current navigation

### Chunk Grouping

```javascript theme={null}
// Group related modules into same chunk
import(/* webpackChunkName: "vendor" */ 'lodash');
import(/* webpackChunkName: "vendor" */ 'axios');
import(/* webpackChunkName: "vendor" */ 'moment');
```

***

## TypeScript Support

```typescript theme={null}
// Type-safe dynamic imports
interface MathModule {
  add(a: number, b: number): number;
  multiply(a: number, b: number): number;
}

async function loadMath(): Promise<MathModule> {
  const module = await import('./math');
  return module;
}

// Usage
const math = await loadMath();
const result = math.add(2, 3); // Type-safe
```

***

## Browser Compatibility

Webpack transforms `import()` to work in all browsers. Native `import()` requires:

* Chrome 63+
* Firefox 67+
* Safari 11.1+
* Edge 79+

Webpack's implementation provides broader compatibility through code transformation.

***

## See Also

* [require()](/api/module-methods/require) - CommonJS module loading
* [require.context()](/api/module-methods/require-context) - Require multiple modules
* [Code Splitting](/guides/code-splitting) - Guide to code splitting strategies
* [Lazy Loading](/guides/lazy-loading) - Lazy loading guide