JavaScript单页应用（SPA）体验取决于路由控制、状态管理、资源加载三者协同；选错核心机制（如history/hash路由、代码分割策略、SSR必要性判断）将导致白屏、404、卡顿等问题。
JavaScript 单页应用（SPA）不是靠“构建教程”堆出来的，而是由路由控制、状态管理、资源加载三者协同决定的。选错核心机制，后续所有优化都会事倍功半。
用 history.pushState 还是 hash 路由？
关键看部署环境是否支持服务端配置。如果静态托管在 GitHub Pages、Netlify 或 Vercel，默认不支持 history 模式下的深层路径回退——用户直接访问 /user/123 会 404。
-
hash模式（#后面部分）完全由前端控制，无需服务端配合，但 URL 不美观，SEO 友好性差，且部分旧版微信 WebView 对hashchange有延迟 -
history模式需要服务端将所有非静态资源请求 fallback 到index.html，否则刷新即 404；现代托管平台一般提供_redirects或vercel.json配置项来解决 - React Router v6 默认用
createBrowserRouter（history），Vue Router 4 默认也是history，但初始化时必须确认部署目标是否已配好 fallback
如何避免路由切换时重复加载组件？
不是所有组件都该在每次 location 变化时重新挂载。比如顶部导航栏、用户信息栏这类全局 UI，应脱离路由层级，用状态 + 条件渲染控制，而非放在 Route 内部。
- 把共享布局提取为父级组件，用
Outlet（React Router）或<router-view>（Vue Router）占位，而不是每个页面都 import 一遍 Header / Sidebar - 对需保活的页面（如表单未提交），可结合
keep-alive（Vue）或自定义useMemo+key控制重渲染边界，避免输入内容丢失 - 慎用
useEffect依赖location.pathname发起请求——它会在每次路由跳转触发，可能造成冗余 API 调用；改用useNavigate后手动触发，或按需加防抖
首屏白屏时间长，是该拆包还是预加载？
白屏本质是 JS 资源未就绪，但盲目分包反而增加 HTTP 请求和解析开销。优先检查是否在入口文件里同步 import 了大量非首屏依赖。
立即学习“Java免费学习笔记（深入）”；
- 路由级代码分割：用
React.lazy+Suspense或 Vue 的异步组件语法（defineAsyncComponent），确保每个Route对应的 chunk 是独立的 - 避免在
App.js顶层 import 图表库、富文本编辑器等重型模块；它们应该只在对应页面内动态加载 - 对关键路由（如首页、登录页），可在
Link上加rel="prefetch"（React Router 支持unstable_prefetchRoutes），但别对所有链接滥用，否则拖慢主资源下载
服务端渲染（SSR）是必须的吗？
不是。90% 的内部系统、后台管理页、权限隔离型应用，纯客户端 SPA 完全够用。SSR 带来的复杂度（Node 中间层、数据脱水/注水、hydrate 差异）远超其收益。
- 只有当页面需被搜索引擎收录、或首屏内容对转化率极其敏感（如营销落地页），才值得引入 SSR 或更轻量的 SSG（静态生成）
- 若只是想解决 SEO，可先用
prerender-spa-plugin（Webpack）或scully（Angular）做构建时预渲染，比 SSR 更简单 - Vite 用户注意：
vite-plugin-ssr等方案仍处于演进中，生产环境稳定性不如 Next.js / Nuxt 成熟生态
真正卡住 SPA 体验的，往往不是框架选型，而是路由与数据流耦合太紧、chunk 分割粒度失当、以及对服务端 fallback 的忽视。这些点没理清，再“标准”的教程步骤也救不了白屏和跳转卡顿。
