我需要在加载其他元素之前加载后备元素
<Suspense fallback={<Loader />}>
这应该在剩余的包装器组件之前工作
import Loader from './components/loader/loader';
import React, { Suspense, lazy } from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Routes, Route } from "react-router-dom";
import reduxStore from './redux/reduxStore';
const UserWrapper = lazy(() => import('./wrapper/UserWrapper'));
const AdminWrapper = lazy(() => import('./wrapper/AdminWrapper'));
const VendorWrapper = lazy(() => import('./wrapper/VendorWrapper'));
function App() {
return (
<React.StrictMode>
<Router>
<Suspense fallback={<Loader />}>
<Routes>
<Route path="*" element={<UserWrapper />} />
<Route path='/admin/*' element={<AdminWrapper />} />
<Route path='/vendor/*' element={<VendorWrapper />} />
</Routes>
</Suspense>
</Router>
</React.StrictMode>
)
}
export default App
当我尝试检查网络中代码的性能（当用户使用 3g 时）（内部检查） 我开始这个问题，该组件在一段时间后才被加载 或者加载 BrowserRouter 后类似
要立即显示加载器并使用 React 和有效处理缓慢的网络状况，请遵循以下重构方法：
优化您的捆绑包：确保您的 JavaScript 捆绑包尽可能小，以减少加载时间。
内联加载器 CSS/JS：直接在 HTML 中包含加载器的关键样式或脚本，以使其立即显示。
预加载您的捆绑包：用于 HTML 头部中的主要 JavaScript 捆绑包以加快加载速度。
使用静态 HTML 加载器：直接在 HTML 中添加一个简单的加载器，并在 React 准备好时隐藏它。
这是一个包含这些策略的简化示例：
HTML（index.html）：
<head>
<link rel="preload" href="path/to/your/main-bundle.js" as="script">
<style>
/* Inline CSS for the static loader */
#static-loader { /* Loader styles */ }
</style>
</head>
<body>
<div id="static-loader">Loading...</div>
<div id="root"></div>
<script>
// Inline script to hide the static loader when React is ready
document.addEventListener('DOMContentLoaded', () => {
const loader = document.getElementById('static-loader');
if (loader) loader.style.display = 'none';
});
</script>
</body>
React 组件（App.js）：
import React, { Suspense, lazy, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
// Lazy-loaded components
const UserWrapper = lazy(() => import('./wrapper/UserWrapper'));
const AdminWrapper = lazy(() => import('./wrapper/AdminWrapper'));
const VendorWrapper = lazy(() => import('./wrapper/VendorWrapper'));
function App() {
useEffect(() => {
// Hide the static loader once React is ready
const loader = document.getElementById('static-loader');
if (loader) loader.style.display = 'none';
}, []);
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="*" element={<UserWrapper />} />
<Route path='/admin/*' element={<AdminWrapper />} />
<Route path='/vendor/*' element={<VendorWrapper />} />
</Routes>
</Suspense>
</Router>
);
}
export default App;
此重构代码可确保加载程序在页面加载后立即可见，从而改善慢速网络上的用户体验。