Create React App 代码拆分（Code Splitting）

在一个大型的 React 应用中，通常会有大量的代码需要加载。为了提高应用的性能和加载速度，我们可以使用代码拆分来将应用拆分成多个小的代码块，只在需要的时候才加载。

为什么需要代码拆分

代码拆分可以帮助减少应用的初始加载时间，因为不需要一次性加载所有的代码。当用户访问一个页面时，只会加载该页面所需的代码，其他页面的代码会在需要的时候再进行加载。这样可以提高页面的加载速度，并且减少网络请求的数量。

使用 React.lazy 和 Suspense 进行代码拆分

在 React 16.6 版本以后，我们可以使用 React.lazy 和 Suspense 来进行代码拆分。React.lazy 可以让我们动态加载一个组件，而 Suspense 则可以在加载过程中显示 loading 界面。

下面是一个简单的示例代码，演示如何使用 React.lazy 和 Suspense 进行代码拆分：

// www.javascriptcn.com code example
import React, { Suspense } from 'react';

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

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

export default MyComponent;

在上面的代码中，我们使用 React.lazy 来动态加载 OtherComponent 组件，并使用 Suspense 来显示 loading 界面。当 OtherComponent 组件加载完成后，会自动显示在页面上。

使用 React Loadable 进行代码拆分

除了使用 React.lazy 和 Suspense，我们还可以使用第三方库 React Loadable 来进行代码拆分。React Loadable 提供了更多的配置选项，可以更灵活地控制代码的加载和显示。

下面是一个使用 React Loadable 的示例代码：

// www.javascriptcn.com code example
import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>
});

function MyComponent() {
  return <LoadableOtherComponent />;
}

export default MyComponent;

在上面的代码中，我们使用 Loadable 函数来创建一个动态加载组件的高阶组件 LoadableOtherComponent，并在 loading 函数中定义 loading 界面。当 OtherComponent 组件加载完成后，会自动显示在页面上。

总结

代码拆分是一个提高 React 应用性能的重要技术，可以帮助减少应用的初始加载时间，提高页面的加载速度。通过使用 React.lazy 和 Suspense 或者 React Loadable，我们可以很方便地实现代码拆分，优化应用的性能。