import 静动态导入

• 打包 → 整体打包成一个 bundle 的一个JS文件

• 代码、模块是加载的时候不需要 → 分割出来单独形成一个文件块 chunk

• 模块化意义

  • 减少应用体积
  • 减少加载时的体积

• 模块的诞生

  • 模块：ES MODULE -> ES6 -> import export

• import 导入模块

  • import 是一个 ES6 的模块化关键字，不是一个函数 import() 、 import
  • 模块静态导入 static import
    • import xxx from ''
    • 导入并加载时，导入的模块会被编译 → 不是按需编译
  • 模块动态导入 dynamic import
    • import('')
    • 根据条件或按需的模块导入
  • import 可以被调用 () vs 普通函数 → import 不是一个对象
    • typeof : typeof (xxx)/ typeof xxx → 关键字

动态导入应用场景

1. 模块太大了，使用可能性很低的模块是存在的，这些模块不需要马上加载的
2. 模块的导入占用的大量的系统内存
3. 模块需要异步获取
4. 导入模块时需要动态的构建路径（说明符）
   1. import xxx from './' + a + b + c + '.js' 这样是不行的
   2. import('./' + a + b + c + '.js') 这样可以（动态说明符）
   3. static import 只支持静态说明符
   4. 动态导入时，如果是根路径， './' 相对路径是必须加的，否则会当做 module 包加载
5. 模块中的代码需要程序触发了某些条件才运行的。（点击按钮，才需要加载）
6. create react app 直接可以使用 import()

class Test {
  constructor() {
    console.log("new Test");
  }
}

export default Test;

const oBtn = document.createElement("button");
oBtn.textContent = "Click 加载动态 module";
document.body.appendChild(oBtn);

// // 得到的是个 Promise
// oBtn.onclick = function () {
//   const module = import("./14.1.module.js");
//   console.log(module); // Promise {<pending>}
// };

// // 通过 async/await 拿到了 Module, 包含一个 default 就是 class Test
// oBtn.onclick = async function () {
//   const module = await import("./14.1.module.js");
//   console.log(module);
//   /**
//    * Module {Symbol(Symbol.toStringTag): 'Module'}
//       default: class Test
//       Symbol(Symbol.toStringTag): "Module"
//       get default: ƒ ()
//       set default: ƒ ()
//    */
// };

// new 这个 Test
oBtn.onclick = async function () {
  const module = await import("./14.1.module.js").then((res) => res.default);
  new module(); // log: new Test
};