面试题：React中如何实现组件的懒加载与代码分割

Question

请描述在React项目里，实现组件懒加载与代码分割的基本方式和常用工具，并给出一个简单的代码示例。

Answer 1

基本方式

在 React 项目中实现组件懒加载与代码分割主要通过 React.lazy 和 Suspense 来实现。

1. React.lazy：用于动态导入组件，实现组件的懒加载。它接收一个函数，该函数必须返回一个动态 import()。
2. Suspense：用于在等待加载懒加载组件时展示一些加载状态，比如 loading 指示器等。

常用工具

在 React 项目中，无需额外引入复杂工具来实现基本的懒加载与代码分割，仅靠 React 内置的 React.lazy 和 Suspense 就能满足大部分需求。但在 Webpack 构建过程中，Webpack 本身对代码分割提供支持，使得 React.lazy 能有效工作。

代码示例

import React, { lazy, Suspense } from 'react';

// 懒加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));

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

export default App;

在上述代码中：

• LazyComponent 使用 React.lazy 进行懒加载，() => import('./LazyComponent') 动态导入 LazyComponent 组件。
• Suspense 组件包裹 LazyComponent，fallback 属性指定在 LazyComponent 加载过程中显示的内容。