# vite-plugin-dynamic-import

> Enhance Vite builtin dynamic import

Latest version **1.6.0** (published 2024-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-dynamic-import
pnpm add vite-plugin-dynamic-import
yarn add vite-plugin-dynamic-import
bun add vite-plugin-dynamic-import
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2024-09-16 |
| First published | 2021-09-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 48.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 217 |
| Author | 草鞋没号 |
| Maintainers | younglei, caoxie |
| Keywords | vite, plugin, import, dynamic |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-dynamic-import
- Repository: https://github.com/vite-plugin/vite-plugin-dynamic-import
- Homepage: https://github.com/vite-plugin/vite-plugin-dynamic-import#readme
- Issues: https://github.com/vite-plugin/vite-plugin-dynamic-import/issues
- npm.io page: https://npm.io/package/vite-plugin-dynamic-import

## Dependencies (4)

- [acorn](https://npm.io/package/acorn.md) ^8.12.1
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.3.2
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.11
- [es-module-lexer](https://npm.io/package/es-module-lexer.md) ^1.5.4

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2024-09-16
- 1.5.0 — 2023-07-06
- 1.4.1 — 2023-06-25
- 1.4.0 — 2023-05-14
- 1.3.4 — 2023-05-04
- 1.3.3 — 2023-05-04
- 1.3.2 — 2023-04-30
- 1.3.1 — 2023-04-30
- 1.3.0 — 2023-04-28
- 1.2.7 — 2023-01-20
- 1.2.6 — 2023-01-13
- 1.2.5 — 2023-01-12
- 1.2.4 — 2022-11-26
- 1.2.3 — 2022-10-16
- 1.2.2 — 2022-09-08
- … 37 more at https://npm.io/package/vite-plugin-dynamic-import/versions

## README

# vite-plugin-dynamic-import

Enhance Vite builtin dynamic import

[![NPM version](https://img.shields.io/npm/v/vite-plugin-dynamic-import.svg)](https://npmjs.org/package/vite-plugin-dynamic-import)
[![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-dynamic-import.svg)](https://npmjs.org/package/vite-plugin-dynamic-import)
[![awesome-vite](https://awesome.re/badge.svg)](https://github.com/vitejs/awesome-vite)

English | [简体中文](https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/main/README.zh-CN.md)

✅ Alias  
✅ Bare module(node_modules)  
✅ Compatible `@rollup/plugin-dynamic-import-vars` [limitations](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations)  
✅ Webpack-like behavior  

## Install

```bash
npm i vite-plugin-dynamic-import -D
```

## Usage

```javascript
import dynamicImport from 'vite-plugin-dynamic-import'

export default {
  plugins: [
    dynamicImport(/* options */)
  ]
}
```

cases 👉 [vite-plugin-dynamic-import/test](https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/main/test)

#### node_modules

```js
dynamicImport({
  filter(id) {
    // `node_modules` is exclude by default, so we need to include it explicitly
    // https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/v1.3.0/src/index.ts#L133-L135
    if (id.includes('/node_modules/foo')) {
      return true
    }
  }
})
```

## API

dynamicImport([options])

```ts
export interface Options {
  filter?: (id: string) => boolean | void
  /**
   * ```
   * 1. `true` - Match all possibilities as much as possible, more like `webpack`
   * see https://webpack.js.org/guides/dependency-management/#require-with-expression
   * 
   * 2. `false` - It behaves more like `@rollup/plugin-dynamic-import-vars`
   * see https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#how-it-works
   * ```
   * 
   * @defaultValue true
   */
  loose?: boolean
  /**
   * If you want to exclude some files  
   * e.g `type.d.ts`, `interface.ts`
   */
  onFiles?: (files: string[], id: string) => typeof files | void
  /**
   * Custom importee
   * 
   * e.g. - append `\/*@vite-ignore*\/` in front of importee to bypass to Vite
   */
  onResolve?: (rawImportee: string, id: string) => typeof rawImportee | void
}
```

## How and why?

*We assume that the project structure is as follows*

```tree
├─┬ src
│ ├─┬ views
│ │ ├─┬ foo
│ │ │ └── index.js
│ │ └── bar.js
│ └── router.js
└── vite.config.js
```

```js
// vite.config.js
export default {
  resolve: {
    alias: {
      // "@" -> "/User/project-root/src/views"
      '@': path.join(__dirname, 'src/views'),
    },
  },
}
```

*Dynamic import is not well supported in Vite, such as*

- Alias are not supported

```js
// router.js
❌ import(`@/views/${variable}.js`)
```

- Must be relative

```js
// router.js
❌ import(`/User/project-root/src/views/${variable}.js`)
```

- Must have extension

```js
// router.js
❌ import(`./views/${variable}`)
```

*We try to fix these problems*

For the alias in `import()`, we can calculate the relative path according to `importer`

```js
// router.js
✅ import(`./views/${variable}.js`)
```

If the import path has no suffix, we use **[glob](https://www.npmjs.com/package/fast-glob)** to find the file according to `UserConfig.resolve.extensions` and supplement the suffix of the import path.  
So we need to list all the possibilities

1. transpire dynamic import variable, you can see [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#how-it-works)

`./views/${variable}` -> `./views/*`

2. generate runtime code

```diff
- // import(`./views/${variable}`)
+ __variableDynamicImportRuntime(`./views/${variable}`)

+ function __variableDynamicImportRuntime(path) {
+   switch (path) {
+     case 'foo':
+     case 'foo/index':
+     case 'foo/index.js':
+       return import('./views/foo/index.js');
+ 
+     case 'bar':
+     case 'bar.js':
+       return import('./views/bar.js');
+ }
```

---
_Source: https://npm.io/package/vite-plugin-dynamic-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._