react中实现懒加载

使用 React.lazy 和 Suspense

React 16.6 引入了 React.lazy 和 Suspense 来实现组件懒加载。React.lazy 允许动态导入组件，Suspense 用于在加载过程中显示备用内容。

import React, { Suspense } from 'react';

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

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

结合路由实现懒加载

在 React Router 中，可以结合 React.lazy 实现路由级别的懒加载，优化页面加载性能。

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

使用第三方库 react-loadable

react-loadable 是一个流行的库，提供了更灵活的懒加载方案，支持预加载和更复杂的加载状态处理。

import Loadable from 'react-loadable';

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

function App() {
  return <LoadableComponent />;
}

图片懒加载

对于图片资源，可以使用 Intersection Observer API 或第三方库如 react-lazyload 实现懒加载。

import LazyLoad from 'react-lazyload';

function App() {
  return (
    <div>
      <LazyLoad height={200} offset={100}>
        <img src="path/to/image.jpg" alt="Lazy loaded" />
      </LazyLoad>
    </div>
  );
}

动态导入与代码分割

通过动态导入语法 import() 结合 Webpack 的代码分割功能，可以进一步优化懒加载性能。

import('./math').then(math => {
  console.log(math.add(16, 26));
});

注意事项

懒加载可能导致组件加载时的短暂延迟，合理设置 fallback 内容提升用户体验。

确保生产环境构建工具（如 Webpack）支持代码分割，避免打包体积过大。

对于关键路径组件，避免过度使用懒加载，以免影响首屏渲染速度。