docs: explain dynamic import (#8127)

vitejs · May 11, 2022 · 774bd28 · 774bd28
1 parent c2bf62b
commit 774bd28
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/docs/config/index.md b/docs/config/index.md
@@ -838,6 +838,7 @@ export default defineConfig({
 ### build.dynamicImportVarsOptions
 
 - **Type:** [`RollupDynamicImportVarsOptions`](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#options)
+- **Related:** [Dynamic Import](/guide/features#dynamic-import)
 
   Options to pass on to [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars).
 

diff --git a/docs/guide/features.md b/docs/guide/features.md
@@ -423,6 +423,16 @@ Note that:
 - The glob matching is done via [`fast-glob`](https://github.com/mrmlnc/fast-glob) - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
 - You should also be aware that all the arguments in the `import.meta.glob` must be **passed as literals**. You can NOT use variables or expressions in them.
 
+## Dynamic Import
+
+Similar to [glob import](#glob-import), Vite also supports dynamic import with variables.
+
+```ts
+const module = await import(`./dir/${file}.js`)
+```
+
+Note that variables only represent file names one level deep. If `file` is `'foo/bar'`, the import would fail. For more advanced usage, you can use the [glob import](#glob-import) feature.
+
 ## WebAssembly
 
 Pre-compiled `.wasm` files can be directly imported - the default export will be an initialization function that returns a Promise of the exports object of the wasm instance: