SPA:概念
spa指的是single page application 是一种特殊的 Web 应用,就是只有一张Web页面的应用, 它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。但是,对单页应用来说模块化的开发和设计显得相当重要。
优点:
1. 良好的交互体验,不刷新,减少 请求 数据ajax异步获取 页面流程;用户体验好、快,内容的改变不需要重新加载整个页面
前端进行的是局部的渲染,避免了不必要的跳转和重复的渲染
2.前后端分离,前端负责view,后端负责model,各司其职; 架构清晰
3.减轻服务端压力
服务器只需要提供数据,不需要管前端的展示逻辑和页面合成,提高了 性能
SPA应用中服务器可以先将一份包含静态资源(HTML CSS JS等)的静荷数据(payload)发送给客户端,之后客户端只需要获取渲染页面或视图数据即可,
4.共用一套后端程序代码,设配多端
不用修改后端程序代码就可以同时适配用于web界面、手机、平板等多种客户端;无需考虑兼容
5.可以缓存较多数据,减少服务器压力
缺点:
1. 首次加载时间过长
为实现单页Web应用功能及显示效果,需要在加载页面时将js、CSS统一加载,部分页面按需加载。
2. SEO(搜索引擎优化)难度高
由于整个页面中网页中没有html,不利于 SEO搜索引擎抓取,
3.页面复杂度提高很多,复杂逻辑难度成倍,开发难度较高
由于后端只提供数据而不再管前端的展示逻辑和页面合成,所以这些展示逻辑和页面合成都需要在前端进行编写(前进、后退等),所以会大大提高页面的复杂性和逻辑的难度
解决办法1.:VUE SSR 只是解决SEO问题;
解决方法2.:路由图片、懒加载、js按需加载、使用cdn、js放在body后边、压缩代码、移除console 、debugger;
异步组件(const aa=resolve =>require([‘../xxx/xx‘]),resolve)
修改webpack配置 、添加登录专用的router配置