您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

前言

对于页面性能优化，组件懒加载是个比较不错的方案，并且在整个项目打包后，如果未做代码分割，构建出的文件体积会非常大，也会出现比较常见的"访问项目某一页面，需要请求整个项目所有页面的资源"问题。

接下来讲一下在React中懒加载我们的组件。

Suspense和Lazy

何时使用lazy函数，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度。

lazy函数可以单独使用，但是在加载组件时候，页面可能会出现空白，此时需要添加loading，这时就需要Suspense了，代码如下：

const Foo = React.lazy(() => import('../componets/Foo)); 

<Foo />

上面的代码直接在函数中使用Foo组件页面加载时会出现白屏，所以需要Suspense来包裹，代码如下：

const Foo = React.lazy(() => import('../componets/Foo)); 

<React.Suspense fallback={<div>loading...</div>}> 
    <Foo/> 
</React.Suspense>

上述为基本使用，对于在当前页面想要懒加载其他组件的情况可以这样做：

import { Spin } from 'antd';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<Spin />}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

OtherComponent是通过懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。在<OtherComponent />外面使用Suspense标签，并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

import { Spin } from 'antd';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<Spin />}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

在Ice.js项目中实践

在Ice项目中，如果想要对整个项目中所有页面进行页面级组件懒加载（代码分割），可以这样：

1. 在app.tsx中配置fallback，对应Suspense中的fallback：

import { Spin } from 'antd';

const appConfig: IAppConfig = {
  app: {
    rootId: 'ice-container',
  },
  router: {
    fallback: <Spin />,
    type: 'browser',
  },
};

runApp(appConfig);

1. 在路由文件中使用懒加载的形式引入组件：

import { lazy, IRouterConfig } from 'ice';
import Layout from '@/layouts/BasicLayout';

const Home = lazy(() => import('@/pages/Home'));

const routes: IRouterConfig[] = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/home',
        component: Home,
      },
    ],
  },
];

export default routes;

1. 在build.json中配置懒加载模式构建，这样构建出来的产物会有多个javascript文件，实现代码分割：

{
    // ...
    "router": {
      "lazy": true
    }
}

这样，就实现了代码分割的效果啦~如图：