静态导入

import xxx from './xxx'
依赖 type=”module”
初始化加载

动态导入

import('./xxx')
不依赖 type=”module”
按需加载

import 是关键字，() 不是调用方法，类似于 typeof: typeof a 与 typeof(a)
只是 import 加了 () 是动态导入

动态导入的使用原因

• 静态导入太多，有一些不需要马上加载的模块
  • 异步

• 使用模块的副作用可以动态导入，比如模块中
  import('./utils')

  export function a() { console.log('hi') }
  console.log('effect'); // 这个就是副作用

  不要滥用动态导入

  现在的框架都有一些初始化的优化、静态的分析工具、treeshaking 等对动态导入不支持

  动态导入会返回 promise

  ```javascript import(‘./utils’).then(module => { console.log(module);

  const {a, b} = module.default; const {plus, minus} = module; })

// 因为是 promise 也可以用 async/await (async ()=> {
// 如果要解构，default 是关键字，需要重命名或再解构 // const { default: utils, plus, minus } = await import(‘./utils’); const { default: {a, b}, plus, minus } = await import(‘./utils’);

console.log({a, b}); })(); ```

type=”module” 和 nomodule

script type=”module”

• 运行在支持 ES2015 标准的浏览器上，忽略 nomodule

script nomodule

• 运行在不支持 ES2015 标准的浏览器上，忽略 type=”module”