React中import加载

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天

在react打包过程中，会将项目整体打包成bundle的一个js文件，但是我们使用import进行动态导入的时候会将代码分割出来单独形成一个文件块chunk

优点：

1. 模块懒加载
2. 减少应用体积
3. 减少加载时体积

区分：

1. import是一个ES6的模块化关键字，不是一个函数，它分为动态导入import()，和静态导入import

2. 使用 静态导入import xxx from '' 动态导入import('')

3. 动态导入import()可以被调用，返回的是一个promise对象，数据需要用async await异步获取

import {plus} from './1.module' //静态导入
class App extends React.Component{

 async importModule() {
    // const {plus}  = await import('./1.module.js')//动态导入
    console.log(plus);
  }
  render() {
    return (
      <div>
        <button onClick={this.importModule.bind(this)}>click</button>
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

export function plus(a, b) {
  console.log('a+b=' + (a + b));
  return a+b
}

动态导入的应用场景：

1. 模块太大了，使用的可能性很低的模块，这些模块不需要马上加载
2. 模块的导入占用大量的系统内存
3. 模块需要异步获取，动态导入支持import('./'+a+b+'.js')的动态说明符
4. 模块中的代码需要触发了某些条件才运行