为什么要动态加载

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

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

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

实现

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

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

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

模块文件：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!
})

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()

模块文件：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()

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

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

动态 import 并调用

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