如何在 React 中实现页面完全加载（字体、图片、样式）后再显示

通过 react 的 `` 组件配合代码分割与资源预加载策略，可实现在所有关键资源（如字体、图片、css）就绪后才渲染主页面，避免闪退、字体闪烁或图片渐进加载问题。

在客户端渲染（CSR）的 react 应用中，浏览器默认会边解析 html/css/js 边渲染，导致未加载完字体时回退到 Times New Roman、图片分块加载、样式未生效前布局错乱等问题。虽然 本身原生仅支持异步组件（如 React.lazy）的加载状态兜底，但它可作为核心协调机制，结合其他技术实现“全资源就绪后首屏展示”的效果。

✅ 推荐分层解决方案（无需每个组件写 useEffect）：

1. 顶层路由级 + React.lazy（基础骨架）
   将主页面逻辑包裹在懒加载组件中，确保 JS 模块加载完成再挂载：

// App.tsx import { Suspense, lazy } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; const HomePage = lazy(() => import('./pages/HomePage')); const AboutPage = lazy(() => import('./pages/AboutPage')); function app() { return (  Loading…