单页面应用和多页面应用区别及优缺点

SPA （Single Page Application） 单页应用程序
它将所有的活动局限于一个Web页面中。单页应用的跳转，只是切换相关组件，刷新局部资源。

	SPA	MPA
结构	一个主页面 + 许多模块的组件	多个完整页面
体验	页面切换快，体验佳；当初次加载慢	页面切换慢
资源文件	组件公用资源只需加载一次	每个页面都要自己加载公用资源
适用场景	不利于 SEO	适用于对 SEO 要求较高的应用
过渡动画	容易实现（transition）	很难实现
刷新方式	相关组件的切换，即局部更新	整页刷新
路由模式	hash / history	普通链接跳转
数据传递	单页面，使用全局变量就好（Vuex）	cookie 、localStorage 缓存，URL 参数等
开发成本	较高，需借助框架	较低 ，但页面重复代码多
维护成本	较为容易	比较麻烦，因为可能一个功能需要改很多地方

SEO是搜索引擎优化，单页面很多内容是异步获取的。网络抓取工具更擅长对静态资源的抓取和分析。所以说单页面对SEO不友好。

SEO优化策略
预渲染：打包生成一些主要路由对应的静态文件，这样有更多的静态资源，网络爬虫可以抓取到更多的网站信息，提升网站的搜索排名。

SPA首屏加载慢如何解决
（1）减小入口文件体积
常用的手段是路由懒加载
在 vue-router 配置路由的时候，采用动态加载路由的形式：

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件。

（2）静态资源本地缓存 localStorage等方式。

（3）UI框架按需加载
在日常使用UI框架，例如element-UI、iView，我们经常性直接引用整个UI库。但实际上我用到的组件只有按钮，分页，表格等很少一部分，所以我们要按需引用：

import { Button, Input, Pagination } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)