ES6 Module 模块化

ES Module 是 ES6 （ import / export ）

  • import 导入模块
    • 是一个 ES6 的模块化关键字，不是一个函数
    • 分为
      • 静态导入 static import
        • import xxx from ''
      • 动态导入 dynamic import
        • import('')
    • 可以被调用 ()
      • 但是与普通函数对比 import 不是一个对象
      • 类似与 typeof 关键字
        • typeof(xxx) / typeof xxx 与 import 不同 () 有否意义是一样

static import 模块的静态导入

导入入并加载时，导入的模块会被立即编译，并不是按需编译

dynamic import 模块的动态导入

根据条件或按需的模块导入

应用场景

  1. 模块太大，使用可能性很低的模块是存在的，这些模块不需要马上加载。
  2. 模块的导入占用大量的系统内存
  3. 模块需要异步获取
  4. 导入模块时需要动态的构建路径（说明符）
    • import xxx from './' + a + b + c + '.js' ❌
    • imprt('./' + a + b + c + '.js') ✔️
      • 动态说明符
    • static import 只支持静态说明符
  5. 模块中的代码需要程序触发了某些条件才运行的
    • 不要滥用

静态导入是有利于初始化依赖，静态的程序分析和 tree shaking 静态导入会使其更好的工作

例子

动态要加载的文件 math.module.js

  1. export function plus(a,b){
  2.     return "a + b = " + a + b;
  3. }
  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  4. class App extends Component {
  5.   async importModule() {
  6.       const {plus} = await import('./math.module.js');
  7.     console.log(plus(1, 2));
  8.   }
  10.     render(){
  11.       return (
  12.         <div>
  13.         <button onClick={this.importModule.bind(this)}>click</button>
  14.       </div>
  15.     )
  16.   }
  17. }
  19. ReactDOM.render(<App/>, document.getElementById('app'));

注意

  • create react app 是可以使用 import()
  • 手动做 webpack 的配置，需要查看代码分割的指南
  • babel 解析 import()，要使用到依赖 @babel/plugin-syntax-dynamic-import

动态导入就是 React 代码分割的一种实现方案，也是最佳的方案。