react组件懒加载

顾名思义, 等你来叫我我才加载就是懒加载, 可以实现初始化速度更快, 加载首页时候有时候并不知道哪些功能是用户不需要的, 全部加载的话太耗费时间, 为了优化客户的体验(加载快点!!), 我们可以使用懒加载来提高初始化速度, 因为减少了初始化过程加载全部功能模块的时间或者其包含的请求时间.

我们可以实现在用户触发某种行为后加载组件, 例如按钮事件或者屏幕滚动事件.

案例 - 展开按钮

function Content() {
  return (
    <>
      <p>今天吃奥利给!!</p>
    </>
  );
}

function App() {
  const [showAbout, setShowAbout] =
    useState(false);
  return (
    <div className="App">
      <h1>今天吃什么</h1>
      <button
        onClick={() => {
          setShowAbout(!showAbout);
        }}
      >
        展开查看
      </button>
      <hr></hr>
      {showAbout && (<Content />)}
    </div>
  );
}

如果不使用懒加载, 上述案例可以实现当你点击按钮后立即加载Content组件并更新UI. 如果组件很庞大为了节省第一次进入页面的时间, 我们可以用react提供的lazy&Susbense修改为懒加载.

案例优化 - 模拟延迟加载

// Promise模拟延迟请求
function delay(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

// 使用一个变量接受import目标组件
const content = import("./component/Content");

// 使用lazy对该变量进行改造, 返回改造后的lazy组件, 可用于jsx
const Content = lazy(async () => {
  await delay(1000);
  return content;
});


function App() {
  const [showAbout, setShowAbout] =
    useState(false);
  return (
    <div className="App">
      <h1>今天吃什么</h1>
      <button
        onClick={() => {
          setShowAbout(!showAbout);
        }}
      >
        展开查看
      </button>
      <hr></hr>
      {/* Suspence包裹lazy组件
          当showAbout变为true, 由Suspense载入的Content组件开始下载.
          而fallback则是在延迟期间替代Content的内容.
      */}
      {showAbout && (
        <Suspense fallback={<p> loading... </p>}>
          <Content />
        </Suspense>
      )}
    </div>
  );
}

可以看到, 在点击按钮之后不会立刻显示Content的内容, 而是先展示loading... 在1000ms后内容才显示出来.

在 控制面板-网络 中也可以看到打包后的bundle文件和Content组件被拆开并分开加载了.