如何用反应路由器实现延迟加载和代码分割？
如何用反应路由器实现延迟加载和代码分割？
提问于 2022-07-21 22:09:03
我正在使用React v17，并使用React v6+。当我加载页面时，浏览器下载了大约900 is的所有js，从而减少了初始加载时间。
我的路线是这样定义的
const PrivateRoute = lazy(() => import("../utils/AuthenticatedRoutes"));
const Profile = lazy(() => import("../modules/Settings/User/Profile"));
const Buddies = lazy(() => import("../modules/Buddies/Buddies"));
const Buddy = lazy(() => import("../modules/Buddies/Buddy"));
const App = () => {
return (
<Suspense fallback={<Loader />}>
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/profile" element={<PrivateRoute render={<Profile />} />} />
<Route path="/buddies" element={<PrivateRoute render={<Buddy />} />} />
</Routes>
</Suspense>
)
}这是私人线路组件
const PrivateRoute = ({ render }: { render: any }) => {
const location = useLocation();
const { loggedIn } = useSelector((state: RootState) => state.userReducer);
const pathname = location.pathname;
if (!loggedIn) {
return <Navigate to={`/login?redirectTo=${pathname}&search=${location.search}`} />;
}
return render;
};问题:当我在应用程序上加载任何页面时，即使是其中没有元素的页面，999‘t的整个JS也会被下载，我不认为延迟加载应该是那样的。
我该怎么处理呢？
回答 2
Stack Overflow用户
发布于 2022-07-21 22:21:32
这很正常。您正在包装整个应用程序悬念，这是直接解决您的后援，而在它下面的任何东西都被挂起。
如何用Suspense实现react router？
您应该为希望延迟加载的每个路由定义Suspense。因此，当路线被调用时，悬念会召唤退路，而它下面的任何东西都会被暂停。
const PrivateRoute = lazy(() => import("../utils/AuthenticatedRoutes"));
const Profile = lazy(() => import("../modules/Settings/User/Profile"));
const Buddies = lazy(() => import("../modules/Buddies/Buddies"));
const Buddy = lazy(() => import("../modules/Buddies/Buddy"));
const App = () => {
return (
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/profile" element={<PrivateRoute render={<React.Suspense fallback={<Loader />}><Profile /></React.Suspense>} />} />
<Route path="/buddies" element={<PrivateRoute render={<React.Suspense fallback={<Loader />}><Buddy /></React.Suspense>} />} />
</Routes>
)
}这与正式文件相同
Stack Overflow用户
发布于 2022-07-21 22:42:38
我不认为您实现代码的方式有任何明显的问题。代码拆分似乎正在工作。
建议
我建议将PrivateRoute组件重构为布局路由组件，而不是包装器组件。
示例：
import { Navigate, Outlet, useLocation } from 'react-router-dom';
const PrivateRoute = () => {
const location = useLocation();
const { loggedIn } = useSelector((state: RootState) => state.userReducer);
const pathname = location.pathname;
if (!loggedIn) {
return <Navigate to={`/login?redirectTo=${pathname}&search=${location.search}`} />;
}
return <Outlet />;
};..。
const PrivateRoute = lazy(() => import("../utils/AuthenticatedRoutes"));
const Profile = lazy(() => import("../modules/Settings/User/Profile"));
const Buddies = lazy(() => import("../modules/Buddies/Buddies"));
const Buddy = lazy(() => import("../modules/Buddies/Buddy"));
const App = () => {
return (
<Suspense fallback={<Loader />}>
<Routes>
<Route path="/" element={<Landing />} />
<Route element={<PrivateRoute />}>
<Route path="/profile" element={<Profile />} />
<Route path="/buddies" element={<Buddy />} />
</Route>
</Routes>
</Suspense>
)
}在这个实现中，我在屏幕上第一次看到了Loader组件"blip“，这是第一次将每个动态导入的组件路由到。
我认为，正如科林在评论中所指出的那样，动态导入的组件并不是整个应用程序包大小的重要部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73073167
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号