这就是你日思夜想的 React 原生动态加载

// 不使用 React.lazyimport OtherComponent from './OtherComponent';// 使用 React.lazyconst OtherComponent = React.lazy(() => import('./OtherComponent'))

// react/packages/shared/ReactLazyComponent.js export const Pending = 0; export const Resolved = 1; export const Rejected = 2;

 <Suspense    maxDuration={500}    fallback={<div>抱歉，请耐心等待 Loading...</div>} >   <OtherComponent />   <OtherComponentTwo /></Suspense>

__webpack_require__.e = function requireEnsure(chunkId) {    // installedChunks 是在外层代码中定义的对象，可以用来缓存了已加载 chunk  var installedChunkData = installedChunks[chunkId]    // 判断 installedChunkData 是否为 0：表示已加载   if (installedChunkData === 0) {    return new Promise(function(resolve) {      resolve()    })  }  if (installedChunkData) {    return installedChunkData[2]  }   // 如果 chunk 还未加载，则构造对应的 Promsie 并缓存在 installedChunks 对象中  var promise = new Promise(function(resolve, reject) {    installedChunkData = installedChunks[chunkId] = [resolve, reject]  })  installedChunkData[2] = promise  // 构造 script 标签  var head = document.getElementsByTagName("head")[0]  var script = document.createElement("script")  script.type = "text/javascript"  script.charset = "utf-8"  script.async = true  script.timeout = 120000  if (__webpack_require__.nc) {    script.setAttribute("nonce", __webpack_require__.nc)  }  script.src =    __webpack_require__.p +    "static/js/" +    ({ "0": "alert" }[chunkId] || chunkId) +    "." +    { "0": "620d2495" }[chunkId] +    ".chunk.js"  var timeout = setTimeout(onScriptComplete, 120000)  script.onerror = script.onload = onScriptComplete  function onScriptComplete() {    script.onerror = script.onload = null    clearTimeout(timeout)    var chunk = installedChunks[chunkId]    // 如果 chunk !== 0 表示加载失败    if (chunk !== 0) {        // 返回错误信息      if (chunk) {        chunk[1](new Error("Loading chunk " + chunkId + " failed."))      }      // 将此 chunk 的加载状态重置为未加载状态      installedChunks[chunkId] = undefined    }  }  head.appendChild(script)    // 返回 fullfilled 的 Promise  return promise}

const OtherComponent = React.lazy(() => import(/* webpackChunkName: "OtherComponent" */'./OtherComponent'));const OtherComponentTwo = React.lazy(() => import(/* webpackChunkName: "OtherComponentTwo" */'./OtherComponentTwo'));

// react/packages/react-cache/src/ReactCache.js export function unstable_createResource<I, K: string | number, V>(  fetch: I => Thenable<V>,  maybeHashInput?: I => K,): Resource<I, V> {  const hashInput: I => K =    maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);  const resource = {    read(input: I): V {      readContext(CacheContext);      const key = hashInput(input);      const result: Result<V> = accessResult(resource, fetch, input, key);      // 状态捕获      switch (result.status) {         case Pending: {          const suspender = result.value;          throw suspender;        }        case Resolved: {          const value = result.value;          return value;        }        case Rejected: {          const error = result.value;          throw error;        }        default:          // Should be unreachable          return (undefined: any);      }    },    preload(input: I): void {      readContext(CacheContext);      const key = hashInput(input);      accessResult(resource, fetch, input, key);    },  };  return resource;}

class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }
  static getDerivedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的 UI      return { hasError: true };    }  componentDidCatch(error, errorInfo) { // 你同样可以将错误日志上报给服务器      logErrorToMyService(error, errorInfo);  }  render() {    if (this.state.hasError) { // 你可以自定义降级后的 UI 并渲染              return <h1>对不起，发生异常，请刷新页面重试</h1>;        }    return this.props.children;   }}

<ErrorBoundary>  <MyWidget /></ErrorBoundary>