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',
},
}
