1. 什么是 SPA？

SPA（Single Page Application） 是一种 Web 应用架构，整个应用只有一个 HTML 页面（通常是 index.html），所有页面内容通过 JavaScript 动态加载和更新，无需重新加载整个页面。

2. SPA 的核心思想

  • 页面跳转 = JavaScript 执行 + DOM 更新
  • 不通过传统方式请求新 HTML 文件
  • 所有“页面变化”由 JS 控制，体验像原生 App

3. SPA vs 传统多页应用（MPA）

对比项 SPA（单页应用） MPA（多页应用）
页面数量 1 个 HTML 多个 HTML 文件
页面跳转 JS 动态更新内容，不刷新 请求新 HTML，页面刷新
首次加载 较慢（需下载 JS） 较快（直接显示）
后续交互 极快（无刷新） 每次都刷新
SEO 较差（需 SSR/SSG 优化） 较好
适用场景 后台系统、Web App 博客、文档、简单网站

4. SPA 的工作流程

1
2
3
4
5
6
7
1. 用户访问 / → 服务器返回 index.html
2. 浏览器下载 JS 文件
3. JS 执行，React/Vue 渲染首页
4. 用户点击“关于” → JS 拦截点击
5. JS 更新 DOM，显示“关于”内容
6. URL 通过 history.pushState() 更新
7. 页面不刷新，完成“跳转”

5. SPA 的关键技术

技术 作用
JavaScript 控制页面逻辑和渲染
前端框架（React/Vue） 组件化开发，高效更新 DOM
前端路由（React Router） 根据 URL 决定渲染哪个组件
History API pushState() 改变 URL 不刷新
AJAX / Fetch 从后端 API 获取数据

6. SPA 的优缺点

✅ 优点

  • 交互流畅，无刷新，体验好
  • 前后端分离，职责清晰
  • 适合复杂 Web 应用（如后台、社交平台）

❌ 缺点

  • 首屏加载慢（需下载 JS）
  • SEO 不友好（搜索引擎难抓取）
  • 初期复杂度高

7. 如何优化 SPA？

问题 解决方案
首屏慢 代码分割（Code Splitting）、懒加载
SEO 差 使用 SSR（如 Next.js）或 SSG（如 VitePress）
JS 太大 压缩、Tree Shaking、CDN 加速

8. SPA 的部署方式

  • 构建：npm run build → 生成 dist/ 目录
  • 输出：index.html + app.js + style.css
  • 部署：放到 静态服务器（Nginx、GitHub Pages、Vercel、CDN）
  • 无需 Node.js 服务器（除非有 API）

9. SPA 的本质一句话

SPA 就是用 JavaScript 模拟页面跳转，把“多页”变成“单页”，提升用户体验。

10. 常见 SPA 框架

  • React + React Router
  • Vue + Vue Router
  • Angular（自带路由）

🎯 总结：
SPA 是现代前端开发的主流模式，核心是 JS 控制路由与渲染。
你写的 React/Vue 项目，默认就是 SPA。
构建后部署静态文件即可运行，简单高效。