单页应用和多页应用
单页面应用
SPA，即单页面应用(Single Page Application)。所谓单页 Web 应用，就是只有一张 Web 页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML 、 CSS 和 JavaScript ，所有的操作都在这张页面上完成，都由 JavaScript 来控制。
优点
用户体验好
只需更新局部的UI，避免整个页面的刷新，提供了更快速、流畅的用户体验
减少服务器负载
相对于传统的多页面应用，不需要每次切换路由，去服务器下载相同的文件
缺点
初次加载时间会长，浏览器空白时间过长
路由切换展示UI都是通过JS来实现，当项目越来越大时，导致JS文件过长。
SEO不友好
由于SPA主要使用JavaScript进行页面渲染，搜索引擎在爬取页面时可能无法获取完整的页面内容，影响SEO效果。
解决缺点方式
代码分割（code splitting）
按需加载
文件压缩（HTML、JS、CSS、图片等文件）
页面预取（Prefetching）
在用户浏览当前页面时，提前预取下一个页面所需要的资源。这样可以利用空闲时间加载后续页面的资源，减少页面切换时的加载延迟。
服务端渲染ssr
多页面应用
在传统的多页面应用中，每个页面都是独立的HTML，每次切换页面时，都会重新加载整个页面，从服务器中下载相应的HTML、JS、CSS文件。
优点：
1.首屏加载快；
2.seo优化好，搜索引擎优化比较容易
3.开发效率:对于以前老程序员可能多页面更顺手，因为他们刚开始接触的都是这种多页面应用，不过用习惯了也差不多。
缺点：
1.由于基本上是后台控制和渲染页面，页面切换加载缓慢，流畅度不够，用户体验比较差
2.对于后端依赖性比较强，依赖 url传参、或者cookie 、localStorage等
3.由于是前后端合在一起的，就会导致如果是纯前端开发人员来做，可能做不了 ，可能还需要后端帮忙一起调试，就会照成效率下降
适用范围：
适用于追求SEO优化比较好，比较注重搜索引擎爬虫抓取比较友好的应用，比如博客系统、cms系统、门户网站等等
hexo 默认生成的是 mpa，每个博客都是一个页面
create-react-app 默认生成的是 spa ，整个文件挂载到 root 上
Last updated