JavaScript-模块化开发（六）动态加载

使用 import 必须在顶层静态导入模块 而使用 import() 函数可以动态导入模块 它返回一个 promise 对象

静态导入

使用 import 顶层静态导入 像下面这样在 {} 中导入是错误的 这是为了分析使用的模块方便打包 所以系统禁止这种行为

if (true) {
  import { name } from "./test.js"; // Error
}

动态导入

const name = "xb";
export { name };

点击事件发生后按需要加载模块

<button> 动态导入</button>
<script>
  document.querySelector("button").addEventListener("click", () => {
    import("./test.js").then(({name }) => {
      console.log(name);
    });
  });
</script>

模块化知识其它文章直达

JavaScript-模块化开发（一）基础知识
JavaScript-模块化开发（二）导入导出
JavaScript-模块化开发（三）使用别名
JavaScript-模块化开发（四）默认导出
JavaScript-模块化开发（五）导出合并