如何实现react路由的懒加载
使用 React.lazy 和 Suspense
React.lazy 函数允许动态导入组件，结合 Suspense 组件实现懒加载。Suspense 提供加载中的回退 UI。
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}结合 React Router 使用
在 React Router 中，可以将懒加载组件作为路由配置的一部分。适用于路由级代码分割。
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}预加载优化
通过预加载策略提升用户体验，例如在用户悬停时提前加载目标路由组件。
const About = React.lazy(() => import('./About'));
function App() {
const preloadAbout = () => {
import('./About');
};
return (
<div onMouseEnter={preloadAbout}>
<Suspense fallback={<div>Loading...</div>}>
<About />
</Suspense>
</div>
);
}动态导入命名导出
对于具名导出的组件，需通过动态导入的 then 方法处理模块对象。
const LazyComponent = React.lazy(() =>
import('./LazyComponent').then(module => ({
default: module.NamedExport
}))
);错误边界处理
使用错误边界捕获懒加载过程中的异常，避免整个应用崩溃。
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>加载失败</h1>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</ErrorBoundary>
);
}Webpack 魔法注释
通过 Webpack 的魔法注释自定义分块名称，便于识别和管理代码块。
const LazyComponent = React.lazy(() =>
import(/* webpackChunkName: "custom-name" */ './LazyComponent')
);
