浅谈异步加载组件的原理

# 什么是异步加载组件

异步加载组件是指在需要的时候才加载组件。通常可以用于优化首屏加载时间，提高用户体验。其出现的原因有一点就是现在的应用都是 SPA 应用，会将所有代码打包到一个 chunk 中，导致解析代码体积过大。

在应用层面我们可以在合适的时机再去请求组件的代码，比如在路由切换的时候再去请求组件的代码。

# 技术实现

通常是通过 ES 的 import () 语法实现的。import () 语法返回一个 Promise 对象，当 Promise 对象状态变为 fulfilled 时，就会返回一个模块对象。模块对象中包含了组件的代码。

而在框架层面，比如 React，会提供一个 React.lazy () 方法，用于异步加载组件。其本质上是一个高阶组件，返回一个特殊的 React 组件。这个特殊的 React 组件会在需要渲染的时候，再去请求组件的代码。

// React.lazy 的简化实现原理
function lazy(ctor) {
  return {
    $$typeof: REACT_LAZY_TYPE,
    _ctor: ctor,
    _status: -1, // -1: 未初始化, 0: 加载中, 1: 成功, 2: 失败
    _result: null,
    _init: function() {
      // 这是关键方法，用于初始化异步组件
      if (this._status === -1) {
        this._status = 0;
        this._result = ctor().then(
          module => {
            this._status = 1;
            this._result = module.default || module;
          },
          error => {
            this._status = 2;
            this._result = error;
          }
        );
      }
      return this._result;
    }
  };
}