react如何实现按虚加载

实现按需加载的方法

使用React.lazy和Suspense实现组件级按需加载。React.lazy函数允许动态导入组件，Suspense提供加载过程中的降级UI。

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

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

路由级按需加载配置

在React Router中结合React.lazy实现路由级别的代码分割。每个路由对应的组件单独打包，仅在访问时加载。

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Suspense fallback={<div>Loading...</div>}><Home /></Suspense>} />
      <Route path="/about" element={<Suspense fallback={<div>Loading...</div>}><About /></Suspense>} />
    </Routes>
  );
}

Webpack代码分割配置

通过Webpack的魔法注释自定义代码分割行为。设置webpackChunkName可以指定生成的chunk名称。

const Component = React.lazy(() => import(/* webpackChunkName: "my-chunk" */ './Component'));

预加载策略

使用webpackPrefetch注释实现资源预加载。浏览器空闲时会提前加载资源，提升后续访问体验。

const Component = React.lazy(() => import(
  /* webpackPrefetch: true */
  /* webpackChunkName: "prefetched-chunk" */ 
  './Component'
));

错误边界处理

结合ErrorBoundary组件处理模块加载失败的情况。当动态导入失败时显示备用UI。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <h1>Module failed to load</h1>;
    }
    return this.props.children;
  }
}

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

动态导入命名导出

对于具名导出的模块，需要额外处理。创建中间模块或使用默认导出包装。

// IntermediateModule.js
export { Component as default } from './NamedExportComponent';

// 使用处
const Component = React.lazy(() => import('./IntermediateModule'));

性能优化建议

将第三方库单独打包，利用浏览器缓存。通过Webpack的splitChunks配置分离vendor代码。

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
  },
}