JavaScript 动态import js文件（动态加载）-马育民老师

# 为什么要动态加载

有些功能在另一个 `.js` 文件中，这些功能不是必须运行的，而是当用户触发时，才会运行

类似的，**动态加载** 也就是 **按需加载**，这样在需要的时候才会调用相应的文件，会从一定程度上提升应用的性能

### 应用场景

支付功能，要对接 `支付宝`、`微信支付`、`银行支付`，但不是一定会运行的，当用户点击支付时，才 **动态加载** 相应的 **支付代码**

# 实现

通过 `import()` 表达式实现，`import(module)` 表达式加载模块并返回一个 `Promise`

## 方式一

`import` 返回 `Promise`，然后通过 `then` 执行

```
import('./xxx.js').then(module => {
	// 通过 module 调用 js文件中导出的方法
})
```

#### 例子1

模块文件：`say.js`，代码如下：

```
export function hi() {
  alert(`Hello`);
}

export function bye() {
  alert(`Bye`);
}
```

动态 import 并调用方式1：

```
import('./say.js').then(module => {
    module.hi(); // Hello!
    module.bye(); // Bye!
})
```

#### 例子2

`say.js` 模块文件默认导出：

```
export default function() {
  alert("Module loaded (export default)!");
}
```

动态 import 并调用

```
import('./say.js').then(module => {
    module.default();
})
```

## 方式二

如果在异步函数中，可通过 `async/await` 实现

```
const handle = async () => {
	let module = await import('./template/sharp.js');
	// 通过 module 调用 js文件中导出的方法
}
handle()
```

#### 例子1

模块文件：`say.js`，代码如下：

```
export function hi() {
  alert(`Hello`);
}

export function bye() {
  alert(`Bye`);
}
```

动态 import 并调用方式1：

```
async function load() {
    let module = await import('./say.js');
    module.hi(); // Hello!
    module.bye(); // Bye!
}
load()
```

动态 import 并调用方式2：

```
async function load() {
    let {hi, bye} = await import('./say.js');
    hi();
    bye();
}
load()
```

#### 例子2

`say.js` 模块文件默认导出：

```
export default function() {
  alert("Module loaded (export default)!");
}
```

动态 import 并调用

```
async function load() {
    let module = await import('./say.js');
    module.default();
}
load()
```

参考：
https://zh.javascript.info/modules-dynamic-imports