当前位置:首页 » 网页前端 » 微服务与前端关系
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

微服务与前端关系

发布时间: 2022-12-14 06:18:03

⑴ 微服务前端和后端的交互

前后的交互的方式主要考虑的是交互方式与传输安全考虑
关于交互方式:
常用的一般是tcp、udp和http
1)get、post、put、delete方式请求操作数据
2)传输数据一般是使用json(也有xml,当时现在很少了)

关于安全性的考虑,先讲下我的设计思想(从内到外):
1)参数签名,使用某种自定义的规则,前后端对要请求的数据进行签名操作,放入参数sign中,可以使用单项加密(如md5),或者是对称加密算法加密
2)使用非对称算法进行加密,在客户端使用公钥加密,服务器端使用私钥解密
3)在传输过程中使用https
4)在服务器端收到数据后,使用私钥进行解密,验证数据完整性
5)参数签名验证
6)对比较重要的数据,如需要返回代表前后端交互的代表值,则需要将返回数据进行加密(根据场景使用加密算法)

对于重要的数据,都是不能以明文数据进行传输的。对于不重要的数据,可进行加密或不进行加密处理

⑵ 微服务架构:基于微服务和Docker容器技术的PaaS云平台架构设计

基于微服务架构和Docker容器技术的PaaS云平台建设目标是给我们的开发人员提供一套服务快速开发、部署、运维管理、持续开发持续集成的流程。平台提供基础设施、中间件、数据服务、云服务器等资源,开发人员只需要开发业务代码并提交到平台代码库,做一些必要的配置,系统会自动构建、部署,实现应用的敏捷开发、快速迭代。在系统架构上,PaaS云平台主要分为微服务架构、Docker容器技术、DveOps三部分,这篇文章重点介绍微服务架构的实施。

如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:854630135,群里有阿里大牛直播讲解技术,以及Java大型互联网技术的视频免费分享给大家。

实施微服务需要投入大量的技术力量来开发基础设施,这对很多公司来说显然是不现实的,别担心,业界已经有非常优秀的开源框架供我们参考使用。目前业界比较成熟的微服务框架有Netflix、Spring Cloud和阿里的Dubbo等。Spring Cloud是基于Spring Boot的一整套实现微服务的框架,它提供了开发微服务所需的组件,跟Spring Boot一起使用的话开发微服务架构的云服务会变的很方便。Spring Cloud包含很多子框架,其中Spring Cloud Netflix是其中的一套框架,在我们的微服务架构设计中,就使用了很多Spring Cloud Netflix框架的组件。Spring Cloud Netflix项目的时间还不长,相关的文档资料很少,博主当时研究这套框架啃了很多英文文档,简直痛苦不堪。对于刚开始接触这套框架的同学,要搭建一套微服务应用架构,可能会不知道如何下手,接下来介绍我们的微服务架构搭建过程以及 需要那些 框架或组件来支持微服务架构。

为了直接明了的展示微服务架构的组成及原理,画了一张系统架构图,如下:

从上图可以看出,微服务访问大致路径为:外部请求 → 负载均衡 → 服务网关(GateWay)→ 微服务 → 数据服务/消息服务。服务网关和微服务都会用到服务注册和发现来调用依赖的其他服务,各服务集群都能通过配置中心服务来获得配置信息。

服务网关(GateWay)

网关是外界系统(如:客户端浏览器、移动设备等)和企业内部系统之间的一道门,所有的客户端请求通过网关访问后台服务。为了应对高并发访问,服务网关以集群形式部署,这就意味着需要做负载均衡,我们采用了亚马逊EC2作为虚拟云服务器,采用ELB(Elastic Load Balancing)做负载均衡。EC2具有自动配置容量功能,当用户流量达到尖峰,EC2可以自动增加更多的容量以维持虚拟主机的性能。ELB弹性负载均衡,在多个实例间自动分配应用的传入流量。为了保证安全性,客户端请求需要使用https加密保护,这就需要我们进行SSL卸载,使用Nginx对加密请求进行卸载处理。外部请求经过ELB负载均衡后路由到GateWay集群中的某个GateWay服务,由GateWay服务转发到微服务。服务网关作为内部系统的边界,它有以下基本能力:

1、动态路由:动态的将请求路由到所需要的后端服务集群。虽然内部是复杂的分布式微服务网状结构,但是外部系统从网关看就像是一个整体服务,网关屏蔽了后端服务的复杂性。

2、限流和容错:为每种类型的请求分配容量,当请求数量超过阀值时抛掉外部请求,限制流量,保护后台服务不被大流量冲垮;党内部服务出现故障时直接在边界创建一些响应,集中做容错处理,而不是将请求转发到内部集群,保证用户良好的体验。

3、身份认证和安全性控制:对每个外部请求进行用户认证,拒绝没有通过认证的请求,还能通过访问模式分析,实现反爬虫功能。

4、监控:网关可以收集有意义的数据和统计,为后台服务优化提供数据支持。

5、访问日志:网关可以收集访问日志信息,比如访问的是哪个服务?处理过程(出现什么异常)和结果?花费多少时间?通过分析日志内容,对后台系统做进一步优化。

我们采用Spring Cloud Netflix框架的开源组件Zuul来实现网关服务。Zuul使用一系列不同类型的过滤器(Filter),通过重写过滤器,使我们能够灵活的实现网关(GateWay)的各种功能。

如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:854630135,群里有阿里大牛直播讲解技术,以及Java大型互联网技术的视频免费分享给大家。

服务注册与发现

由于微服务架构是由一系列职责单一的细粒度服务构成的网状结构,服务之间通过轻量机制进行通信,这就引入了服务注册与发现的问题,服务的提供方要注册报告服务地址,服务调用放要能发现目标服务。我们的微服务架构中使用了Eureka组件来实现服务的注册与发现。所有的微服务(通过配置Eureka服务信息)到Eureka服务器中进行注册,并定时发送心跳进行 健康 检查,Eureka默认配置是30秒发送一次心跳,表明服务仍然处于存活状态,发送心跳的时间间隔可以通过Eureka的配置参数自行配置,Eureka服务器在接收到服务实例的最后一次心跳后,需要等待90秒(默认配置90秒,可以通过配置参数进行修改)后,才认定服务已经死亡(即连续3次没有接收到心跳),在Eureka自我保护模式关闭的情况下会清除该服务的注册信息。所谓的自我保护模式是指,出现网络分区、Eureka在短时间内丢失过多的服务时,会进入自我保护模式,即一个服务长时间没有发送心跳,Eureka也不会将其删除。自我保护模式默认为开启,可以通过配置参数将其设置为关闭状态。

Eureka服务以集群的方式部署(在博主的另一篇文章中详细介绍了Eureka集群的部署方式),集群内的所有Eureka节点会定时自动同步微服务的注册信息,这样就能保证所有的Eureka服务注册信息保持一致。那么在Eureka集群里,Eureka节点是如何发现其他节点的呢?我们通过DNS服务器来建立所有Eureka节点的关联,在部署Eureka集群之外还需要搭建DNS服务器。

当网关服务转发外部请求或者是后台微服务之间相互调用时,会去Eureka服务器上查找目标服务的注册信息,发现目标服务并进行调用,这样就形成了服务注册与发现的整个流程。Eureka的配置参数数量很多,多达上百个,博主会在另外的文章里详细说明。

微服务部署

微服务是一系列职责单一、细粒度的服务,是将我们的业务进行拆分为独立的服务单元,伸缩性好,耦合度低,不同的微服务可以用不同的语言开发,每一个服务处理的单一的业务。微服务可以划分为前端服务(也叫边缘服务)和后端服务(也叫中间服务),前端服务是对后端服务做必要的聚合和剪裁后暴露给外部不同的设备(PC、Phone等),所有的服务启动时都会到Eureka服务器进行注册,服务之间会有错综复杂的依赖关系。当网关服务转发外部请求调用前端服务时,通过查询服务注册表就可以发现目标服务进行调用,前端服务调用后端服务时也是同样的道理,一次请求可能涉及到多个服务之间的相互调用。由于每个微服务都是以集群的形式部署,服务之间相互调用的时候需要做负载均衡,因此每个服务中都有一个LB组件用来实现负载均衡。

微服务以镜像的形式,运行在Docker容器中。Docker容器技术让我们的服务部署变得简单、高效。传统的部署方式,需要在每台服务器上安装运行环境,如果我们的服务器数量庞大,在每台服务器上安装运行环境将是一项无比繁重的工作,一旦运行环境发生改变,就不得不重新安装,这简直是灾难性的。而使用Docker容器技术,我们只需要将所需的基础镜像(jdk等)和微服务生成一个新的镜像,将这个最终的镜像部署在Docker容器中运行,这种方式简单、高效,能够快速部署服务。每个Docker容器中可以运行多个微服务,Docker容器以集群的方式部署,使用Docker Swarm对这些容器进行管理。我们创建一个镜像仓库用来存放所有的基础镜像以及生成的最终交付镜像,在镜像仓库中对所有镜像进行管理。

服务容错

微服务之间存在错综复杂的依赖关系,一次请求可能会依赖多个后端服务,在实际生产中这些服务可能会产生故障或者延迟,在一个高流量的系统中,一旦某个服务产生延迟,可能会在短时间内耗尽系统资源,将整个系统拖垮,因此一个服务如果不能对其故障进行隔离和容错,这本身就是灾难性的。我们的微服务架构中使用了Hystrix组件来进行容错处理。Hystrix是Netflix的一款开源组件,它通过熔断模式、隔离模式、回退(fallback)和限流等机制对服务进行弹性容错保护,保证系统的稳定性。

1、熔断模式:熔断模式原理类似于电路熔断器,当电路发生短路时,熔断器熔断,保护电路避免遭受灾难性损失。当服务异常或者大量延时,满足熔断条件时服务调用方会主动启动熔断,执行fallback逻辑直接返回,不会继续调用服务进一步拖垮系统。熔断器默认配置服务调用错误率阀值为50%,超过阀值将自动启动熔断模式。服务隔离一段时间以后,熔断器会进入半熔断状态,即允许少量请求进行尝试,如果仍然调用失败,则回到熔断状态,如果调用成功,则关闭熔断模式。

2、隔离模式:Hystrix默认采用线程隔离,不同的服务使用不同的线程池,彼此之间不受影响,当一个服务出现故障耗尽它的线程池资源,其他的服务正常运行不受影响,达到隔离的效果。例如我们通过andThreadPoolKey配置某个服务使用命名为TestThreadPool的线程池,实现与其他命名的线程池隔离。

3、回退(fallback):fallback机制其实是一种服务故障时的容错方式,原理类似Java中的异常处理。只需要继承HystixCommand并重写getFallBack()方法,在此方法中编写处理逻辑,比如可以直接抛异常(快速失败),可以返回空值或缺省值,也可以返回备份数据等。当服务调用出现异常时,会转向执行getFallBack()。有以下几种情况会触发fallback:

1)程序抛出非HystrixBadRequestExcepption异常,当抛出HystrixBadRequestExcepption异常时,调用程序可以捕获异常,没有触发fallback,当抛出其他异常时,会触发fallback;

2)程序运行超时;

3)熔断启动;

4)线程池已满。

4、限流: 限流是指对服务的并发访问量进行限制,设置单位时间内的并发数,超出限制的请求拒绝并fallback,防止后台服务被冲垮。

Hystix使用命令模式HystrixCommand包装依赖调用逻辑,这样相关的调用就自动处于Hystrix的弹性容错保护之下。调用程序需要继承HystrixCommand并将调用逻辑写在run()中,使用execute()(同步阻塞)或queue()(异步非阻塞)来触发执行run()。

动态配置中心

微服务有很多依赖配置,某些配置参数在服务运行期间可能还要动态修改,比如:根据访问流量动态调整熔断阀值。传统的实现信息配置的方法,比如放在xml、yml等配置文件中,和应用一起打包,每次修改都要重新提交代码、打包构建、生成新的镜像、重新启动服务,效率太低,这样显然是不合理的,因此我们需要搭建一个动态配置中心服务支持微服务动态配置。我们使用Spring Cloud的configserver服务帮我们实现动态配置中心的搭建。我们开发的微服务代码都存放在git服务器私有仓库里面,所有需要动态配置的配置文件存放在git服务器下的configserver(配置中心,也是一个微服务)服务中,部署到Docker容器中的微服务从git服务器动态读取配置文件的信息。当本地git仓库修改代码后push到git服务器仓库,git服务端hooks(post-receive,在服务端完成代码更新后会自动调用)自动检测是否有配置文件更新,如果有,git服务端通过消息队列给配置中心(configserver,一个部署在容器中的微服务)发消息,通知配置中心刷新对应的配置文件。这样微服务就能获取到最新的配置文件信息,实现动态配置。

以上这些框架或组件是支撑实施微服务架构的核心,在实际生产中,我们还会用到很多其他的组件,比如日志服务组件、消息服务组件等等,根据业务需要自行选择使用。在我们的微服务架构实施案例中,参考使用了很多Spring Cloud Netflix框架的开源组件,主要包括Zuul(服务网关)、Eureka(服务注册与发现)、Hystrix(服务容错)、Ribbon(客户端负载均衡)等。这些优秀的开源组件,为我们实施微服务架构提供了捷径。

如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:854630135,群里有阿里大牛直播讲解技术,以及Java大型互联网技术的视频免费分享给大家。

⑶ 轻量、高效、功能强大的微前端框架-MicroApp

这几年后端的微服务是比较火爆,我们公司目前只要是新项目,基本上都是基于微服务去架构的,那么微前端是什么呢?

微前端是借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活

以前我们为了把几个独立运行的小型应用合并成一个应用都是通过iframe的方式去实现的,如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题

micro-app不是基于iframe架构的

micro-app提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的开箱即用功能

micro-app没有任何依赖

为了保证各个业务之间独立开发、独立部署的能力,micro-app做了诸多兼容,在任何技术框架中都可以正常运行。

下面我讲一下如何在Vue中使用micro-app

1、初始化一个基座应用

2、基座应用的文件修改

main.js修改

router.js修改

3、main-page.vue页面

4、创建一个子应用

5、子应用的router.js文件修改

6、src目录下新建 public-path.js

7、 main.js 引入public-path.js

到此这个简单的微应用就搭好了

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

⑷ 微服务下没有服务网关前端如何调用后端服务

在微服务改造过程中,往往我们会遇到这样的情况,在开发环境中没有服务网关,前端需要连接多个独立服务(独立服务的意思是服务不是同一个ip+端口所提供的)。在开发时,我们可以直接写死服务地址,来实现对后端服务的调用。但是,如若到生产环境,亦或是临时将开发成果暴露至公网,这个方法显然不行。那有没有办法零时顶替一下呢?

1.前端调用的后端服务地址抹去ip+端口(将写死的地址去掉)
2.加上易辨别的前缀,用于Nginx转发是匹配的url路径
3.在nginx配置文件中添加该url路径的代理地址
例如作者配置的图片浏览服务的nginx代理:

⑸ 前后端分离微服务架构如何设计

前端

前端开发人员专注业务的页面呈现,非常注重用户体验度,也是与各种角色打交道最多的。

比如:

一般前端工作包括六个部分:

后端

如果前后端职责划分很清楚的话,后端更多开发工作在于业务接口设计、业务逻辑处理以及数据的持久化存储,并提供详细的接口设计文档给前端开发人员使用。

一般后端工作包括五个部分:

1、与产品经理对接需求

2、业务 API 接口开发:根据根据需求文档进行业务接口开发

4、接口对接:与前端开发人员接口对接

5、前后端联调测试:包括页面展示以及接口数据

6、bug修复

前端开发技术栈

h5 、 css 、 nodejs / vue / angular / react 、 webpack 、 hbuilder / vscode 等

后端开发技术栈

SpringCloud / Springboot 、 SpringMVC 、 ORM 框架、数据库缓存框架( Redis , Codis , Memcached 等),大数据框架( Hadoop / Spark / hive / Hbase / Storm / ES / Kafka )等等

技术选型

最好选择成熟稳定,易上手、开发效率高的技术,因为实际项目开发时间是有限的,开发人员没有多少精力放在学习和深度研究技术上。

数据格式

后端开发提供接口设计文档,详细写明每个接口的请求地址、请求参数、响应参数等等;一般采用 REST 风格以 JSON 格式提供数据。

接口设计

一个接口设计的好坏,直接影响到前后端的一些沟通协调问题。

依笔者的经验来看,如果后端接口不稳定,会导致前端开发人员反复修改页面数据呈现。常常出现后端开发说这是前端问题,前端开发说是后端问题,来回扯皮,沟通效率低下。

接口容量问题

一个接口的业务容量大小,往往代表前后端工作量的大小。

如果一个接口的业务容量太小,前端需要分阶段处理的事情就多,尤其是对多个接口 Ajax 异步处理;

如果一个接口的业务容量太大,那么业务耦合性高,万一需求变更,后端程序改动大,不利于程序的扩展。

一、前后端分离的思想要转变

不能老是按照传统WEB( js/h5/css/ 后端代码放在一个工程)开发思维去看待前后端分离

二、沟通成本问题

以前传统 WEB 开发,开发人员从需求到设计到开发基本上是一个人。

而前后端分离后,前端只负责页面呈现,后端更注重业务逻辑处理以及数据的持久化,双发都有自己的侧重点,工作量上有私心。

三、组织结构问题

康威定律

第一定律: Communication dictates design (组织沟通方式会通过系统设计表达出来)

第二定律: There is never enough time to do something right, but there is always enough time to do it over (时间再多一件事情也不可能做得美,但总有时间做完一件事情)

第三定律 : There is a homomorphism from the linear graph of a system to the linear graph of its design organization (线型系统和线型组织架构间有潜在的异质同态特性)

第四定律: The structures of large systems tend to disintegrate ring development, qualitatively more so than with small systems (大的系统组织总是比小系统更倾向于分解)

康威定律说明以下几点

四、部署及监控运维

前后端分离后,拆分的服务会带来线上部署以及如何监控运维的复杂性。

总体来说,前后分离所带来的好处还是更明显的。一个成熟的前后端分离的团队,文档化约定,前后端职责分离、接口约定都是做得比较好的

⑹ 微服务平台前后端是相同的平台吗

微服务平台前后端不是相同的平台。根据查询相关公开信息显示,微服务的平台别部署在不同服务器上,前后端分离一般是在开发的时候项目分开,部署的时候会把前端代码编译到后端的平台。微服务平台是指一种软件开发技术。面向服务的体系结构SOA架构样式的一种变体,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调、互相配合,为用户提供最终价值。

⑺ 前端微服务设计

近些年,前端发展呈百家争鸣式发展,框架层出不穷,版本更是迭代不穷,难免会出现前端项目技术栈不统一、所用框架版本不统一的情况。
如若某些项目,没有新的功能加入,又能线上稳定运行,但其技术栈却用的是 vue1.0,为了将其结合到新应用中去而对其重构,成本会很高。然而,微服务可以帮我们解决这个问题。
在既不重写原有系统的基础之下,又可以抽出人力来开发新的业务。其不仅仅对于业务人员来说是一个相当吸引力的特性,对于技术人员来说,不重写旧的业务,能在一些新技术上做挑战,也是一件很有意思的事情。
除此之外,在这两三年里,移动应用出现了一种趋势,用户不想装那么多应用。而往往一家大的商业公司,会提供一系列的应用。这些应用也从某种程度上,反应了这家公司的组织架构。然而,在用户的眼里他们就是一家公司,他们就只应该有一个产品。相似的,这种趋势也在桌面 Web 出现。聚合成为了一个技术趋势,体现在前端的聚合就是微服务化架构。

理想的前端微服务化,应该是符合如下几个特点:

路由分发式微前端,即通过设置路由,将不同的业务分发到不同的、独立前端应用上。其通常可以通过 HTTP 服务器的反向代理来实现,又或者是应用框架自带的路由来解决。

就当前而言,通过路由分发式的微前端架构应该是采用最多、最易采用的 “微前端” 方案。但是这种方式看上去更像是多个前端应用的聚合,即我们只是将这些不同的前端应用拼凑到一起,使他们看起来像是一个完整的整体。但是,它们并不是一个完整的整体,每次用户从 A 应用到 B 应用的时候,往往需要刷新一下页面。
通常可通过 nginx 配置反向代理,来进行路由分发,从而实现前端微服务。

它适用于以下场景:

iframe 可以创建一个全新的独立的宿主环境,这意味着我们的前端应用之间可以相互独立运行。

采用 iframe 有几个重要的前提:

即何时加载、卸载应用,如何监听应用事件等。

不论是基于 Web Components 的 Angular,或者是 VirtualDOM 的 React 等,现有的前端框架都离不开基本的 HTML 元素 DOM。

那么,我们只需要:

第一个问题,创建 DOM 是一个容易解决的问题。而第二个问题,则一点儿不容易,特别是移除 DOM 和相应应用的监听。当我们拥有一个不同的技术栈时,我们就需要有针对性设计出一套这样的逻辑。现有的框架有single-spa、qiankun、mooa等

常见的方式有:

其次,采用这种方式还有一个限制,那就是:规范! 规范! 规范!。在采用这种方案时,我们需要:

Web Components 组件可以拥有自己独立的 Scripts 和 Styles,以及对应的用于单独部署组件的域名。然而它并没有想象中的那么美好,要直接使用纯 Web Components 来构建前端应用的难度有:

现有的微前端框架有single-spa、qiankun、mooa。其均是在前端框架之上设计通讯、加载机制来实现的。

⑻ 微服务架构下,进行前后端分离,前端怎么写

分离后的前端,不再是一个简单的HTML文件,已经是一个独立的应用系统。除了要考虑页面的数据渲染展示,还要用工程化的思想来考虑前端的架构,前后端的交互和数据安全等事情。

RESTful接口交互
前后端分离之后,更多的是采用RESTful风格的接口与后端进行数据交互。

REST是“呈现状态转移(REpresentational State Transfer)”的缩写,一种API的架构风格,在客户端和服务端之间通过呈现状态的转移来驱动应用状态的演进。

在 REST 样式的 Web 服务中,每个资源都有一个地址。资源本身都是方法调用的目标,方法列表对所有资源都是一样的。这些方法都是标准方法,包括 HTTP GET、POST、PUT、DELETE,还可能包括 HEADER 和 OPTIONS。
RESTful的API设计,使得后端通过接口向前端传递数据,数据的格式通常是JSON这种通用的格式。对前端来说,只要后端返回过来的是RESTful的数据就行,不管后端是用Java写,还是用python或PHP,拜托对后端的依赖,做到前端系统的独立。

工程化构建

Nodejs不止可以用来做前端服务器,在开发阶段,它也能发挥很大的作用。

前端生态的发展,是围绕着Nodejs进行的。用npm来管理项目依赖,可以很好的维护和运行在Nodejs环境上。

打包工具grunt、gulp、webpack和rollup等,都是运行在nodejs上,再结合语法编译、打包部署等插件,将应用输入成一个完整的应用。

如果你使用了Angular、React或Vue框架,或者你使用浏览器暂时还不兼容的ES6语法,还需要在应用打包前用babel将语法编译成浏览器可识别的ES5的语法。

SPA
SPA是单页Web应用(single page web application,SPA)的简写,就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

像Angular、React或Vue就是为了SPA而设计的,结合前端路由库(react-router、vue-router)和状态热存储(rex、vuex)等,可以开发出一个媲美Native APP的Web APP,用户体验得到了很大的提升。

当然,SPA也不是完美的,也不是适合所有的web应用,需要结合项目和场景来选择。

SPA有如下缺点:

  • 初次加载耗时增加。可以通过代码拆分、懒加载来提升性能,减少初次加载耗时。

  • SEO不友好,现在可以通过Prerender或Server render来解决一部分。

  • 页面的前进和后端需要开发者自己写,不过现在一些路由库已经帮助我们基本解决了。

  • 对开发者要求高,由于做SPA需要了解一整套技术栈,所以,要考虑后期是否有合适的人选进行维护。