前端性能优化：React Lazy Loading

故事背景

一个大型 React 项目加载速度变慢，我通过 Lazy Loading 优化了首屏加载时间。

设计思路

使用 React.lazy 动态加载组件。
配合 Suspense 处理加载状态。
项目初始化

npx create-react-app lazy-demo --template=typescript

懒加载组件

import React, { Suspense } from 'react';

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

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

被加载组件

// src/LazyComponent.tsx
export default function LazyComponent() {
  return <p>This is lazily loaded!</p>;
}