在React中，您可以通过动态导入功能以及`React.lazy()`来实现懒加载；而在Next.js中，则可以使用`next/dynamic`来完成同样的任务。

先决条件

在开始学习之前，请确保您已经具备以下条件：

• 对React有基本的了解，包括组件、钩子以及状态管理等概念。

• 已安装Node.js（建议使用18版或更高版本）。

• 拥有一个React应用程序（可以使用Create React App或Vite创建），或者一个Next.js应用程序（用于后续的示例学习）。

对于React相关的示例，您可以选择使用Create React App或Vite；而对于Next.js的示例，则需要使用App Router功能（Next.js 13版及以上版本支持）。

如何使用`React.lazy`进行代码分割

React.lazy()允许你将某个组件定义为动态导入的组件。React只会在该组件首次被渲染时才会加载它。React.lazy() 需要一个能够返回动态调用的 import() 函数。被导入的模块必须使用默认导出方式。
下面是一个基本的示例：

import { lazy } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminDashboard = lazy(() => import('./Admin Dashboard');

function App() {
  return (
    

      
我的应用
      
      
    
  );
}

如果使用带名称的导出，你可以将它们映射为默认导出：

const ComponentWithNamedExport = lazy(() => {
  import('./MyComponent').then((module) => ({
    default: module NamedComponent,
  }));
});

你还可以为这些代码块指定名称，以便在浏览器中进行更便捷的调试：

const HeavyChart = lazy(() => {
  import(/* webpackChunkName: "heavy-chart" */ './HeavyChart');
});

单凭 React.lazy() 是不够的。你必须将这些懒加载组件包裹在 Suspense 中，这样 React 才知道在它们加载期间应该显示什么内容。

如何将 Suspense 与 React.lazy 一起使用

Suspense 是一个 React 组件，当它的子组件正在加载时，它会显示替代内容。它与 React.lazy() 结合使用，可以处理动态导入组件的加载状态。
将你的懒加载组件包裹在 Suspense 中，并提供一个 fallback 属性：

import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminDashboard = lazy(() => import('./Admin Dashboard');

function App() {
  return (
    

      
我的应用
      正在加载图表...
        
      
      正在加载管理面板...
      
    
  );
}

你也可以为多个懒加载组件使用同一个 Suspense 结构：

正在加载中...
  
  

一个设计得更精良的替代内容显示方式，能够提升用户体验：

function LoadingSpinner() {
  return (
    

      

      
正在加载中...
    
  );
}

}>
  

如何使用错误边界来处理错误

React.lazy() 和 Suspense 并不能处理加载错误（例如网络故障或某些代码块缺失）。为此，你需要使用错误边界。

“错误边界”是一种组件，它使用`componentDidCatch`或`static getDerivedStateFromError`来捕获其子树中出现的错误，并显示替代界面。

下面是一个简单的错误边界示例：

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('错误被错误边界捕获：', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || 
发生了错误。
;
    }
    return this.props.children;
  }
}

请将你的`Suspense`组件包裹在错误边界中：

import { lazy, Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const HeavyChart = lazy(() => import('./HeavyChart');

function App() {
  return (
    图表加载失败，请重试。
      正在加载图表……
        
      
    
  );
}

如果某个组件无法成功加载，错误边界会捕获这个错误，并显示替代界面，而不会让页面显示空白内容或出现未处理的错误。

如何在Next.js中使用`next/dynamic`

Next.js提供了`next/dynamic`这个功能，它结合了`React.lazy()`和`Suspense`，并为Next.js添加了一些专门的设计选项（包括服务器端渲染功能）。

基本用法如下：

'use client';

import dynamic from 'next/dynamic';

const ComponentA = dynamic(() => import('../components/A'));
const ComponentB = dynamic(() => import('../components/B');

export default function Page() {
  return (
    

      
      
    
  );
}

自定义加载界面

你可以通过设置`loading`选项，在组件加载期间显示占位符：

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: () => 
正在加载图表……
,
});

禁用服务器端渲染

对于那些只能在客户端运行的组件（例如那些使用`window`或仅浏览器可用API的组件），请将`ssr: false`设置为这些组件的属性：

const ClientOnlyMap = dynamic(() => import('../components/Map'), {
  ssr: false,
  loading: () => 
正在加载地图……
,
});

注意：`ssr: false`仅适用于客户端组件。请在包含`’use client’`语句的文件中使用这个选项。

按需加载组件

只有当满足特定条件时，你才能加载某个组件：

'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Modal = dynamic(() => import('../components/Modal'), {
  loading: () => 
正在加载模态框...
,
});

export default function Page() {
  const [showModal, setShowModal] = useState(false);

  return (
    

      打开模态框
      {showModal && }
    
  );
}

命名导出

对于需要命名导出的情况，你需要通过动态导入来获取相应的组件：

const Hello = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
);

结合 next/dynamic 使用 Suspense

在 React 18 及更高版本中，你可以使用 suspense: true，这样就可以依赖父组件的 Suspense 结构来处理加载逻辑，而无需使用 loading 选项：

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  suspense: true,
});

// 在你的组件中：
正在加载中...