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

通过 react 的 `` 组件配合代码分割与资源懒加载策略，可在客户端渲染中实现“全量资源就绪后才展示页面”，避免字体回退、图片渐进加载等闪烁问题。

在 react 客户端渲染（CSR）应用中，页面默认“边加载边渲染”，导致未加载完成的字体（如回退为 Times New Roman）、未解码的图片（模糊/占位/分块加载）或未注入的 css 样式会短暂暴露给用户，影响体验一致性与专业感。虽然 原生仅支持 异步组件（React.lazy） 的加载状态兜底，但结合现代前端工程实践，我们可通过以下组合方案实现「所有关键资源（字体、图片、内联样式、第三方组件）全部就绪后才首屏渲染」：

✅ 推荐架构：根级 Suspense + 资源预加载守卫

1. 使用 React.lazy + Suspense 包裹路由组件（基础层）

// App.tsx import { Suspense, lazy } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; const HomePage = lazy(() => import('./pages/Home')); const AboutPage = lazy(() => import('./pages/About')); function app() { return (  {/* 全局加载态：所有路由组件加载完成前显示 Loading */} Loading…