纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vivo 官网资源包适配多场景的应用

vivo互联网技术   2021-03-02 我要评论

本文介绍了资源包的概念及使用场景,同时对资源包的几种使用方案进行对比。通过本文,大家可以快速掌握资源包的使用方法,解决单一配置满足多场景、多样式的问题。

一、业务背景

随着官网项目的业务深入发展,单纯的配置已经满足不了各种复杂场景的需求了,靠适配各种场景的需求只会让配置后台越来越复杂。而且有些特殊场景是需要在特殊时间触发,并且需要运营人员做到快速配置,无需发版,配置正确的地步。资源包的出现就是为了解决上述场景的。它能配置一次,无需发版,支持预览,并且适合所有特殊场景的样式。这种能力已经在我们官网运用的很好了。

二、什么是资源包?

包含网页、JS、CSS 和图片视频等静态资源的文件,并具有一定目录规则的压缩包,可以通过后台配置,快速上线更换,无需版本发布。下图所展示的是一个Demo的资源包目录。

三、为什么要使用资源包

最开始我们开发完一个功能,即使设计时考虑的比较通用,但是在一些特殊节日的时候总有样式上面的偏差,功能无法满足,紧急情况只能发版解决。所以出现了资源包的解决方案,这种方案只需要前端按照一定的规则开发一个完整的资源包,在后端进行资源包的解析。

前端能立马看到整个页面样式,做到配置一次,快速上线的目的。这种方式对大部分场景比较适用,但是对于需要动态获取数据、用户分流的页面不太适用,资源包大多都是静态页面。所以在使用资源包的前提下需要自己去评估下业务场景。

3.1  资源包使用场景

  1. 解决一套配置只适配一种样式的局限性,满足了多页面多样式的随时更新的需求。
  2. 满足特殊活动前端展示特殊样式的需求,比如各种节日的主题,特殊活动的内容,手机360度模型。
  3. 可以作为各个场景的兜底数据,并且在重构的时候可以解决新旧数据的兼容性问题。

图一:

图二:

 

图一和图二是两种不同的资源包,图一是X50 Pro+的360度模型,图二是X50 Pro+的静态宣传页面,两种不同的资源包达到了给用户展示不同的效果目的,其实在后台就一个配置入口。

可见这种方式非常灵活的展示了不同的需求。

四、怎么使用资源包

4.1  整体流程

不同的资源包有不同的规则目录,解析规则也不一样,所以后台有统一的资源包解析适配器,对应到不同的解析方法,然后经过一系列的解析操作(主要是JS、CSS、图片、视频、JSon文件官网规则适配逻辑和相对路径的替换)之后把主页面内容入库和入缓存。最后把上传的资源包解压后上传到

静态资源服务器上面。资源压缩包上传到静态服务器我们这边尝试了三种方案,分别如下:

4.2  方案一:本地解压

本地解压是在本机器完成资源包的解压工作,把资源包所有文件解压到本机的规定的目录,然后解析压缩完的主网页,替换网页中所有的引用静态资源的路径。

下图展示了本地解压方案

本地解压主要是把制作好的静态资源zip包上传上去,规定好解压路径,通过Zip的工具类对zip包进行解压,解压好的文件上传到本地,本地解析主要是对解压好的文件中主文件比如"index.html"进行解析,解析的主要工作是按照一定规则通过jsoup去操作HTML 文件,筛选一些我们需要的样式、页面并且替换静态资源的路径,改为上传到你本地路径。前端直接获取服务端返回的数据进行渲染成你资源包的页面。

本地解压方案评估

  • 优势:

  1. 解压资源包和解析资源包的速度比较快。
  2. 资源包文件能完美解压全文件数据,丢失的概率会小很多。
  • 劣势:

  1. 文件存储本地,影响本地的存储容量,不好统一管理。
  2. 文件存储本地,影响后续系统的容器化。
  3. 文件安全性,容易造成违规文件社交性散播。

4.3  方案二:本地解压+云上传

本地解压如同第一种方案,之后会把解压后的所有文件上传到OSS服务器上面。同样去解析主文件"index.html"。后续步骤类似第一种方案。

本地解压+云上传方案评估

  • 优势

  1. 文件具备统一管理,可支持在线删除,编排的能力。
  2.  文件安全性,上传到OSS存储服务器上面的文件具备时效性,具备安全性。
  • 劣势

  1. 文件上传的速度最终会导致静态资源包上传的速度,跟网络IO强相关。
  2.  文件整体性差,其中有一份文件没有上传上去,不支持回滚,导致整个资源包不可用。

4.4 方案三:云解压

如何确保资源包的整体性?思路:上传一个完成的资源包到云服务器,然后在线解压?

静态资源包会直接上传到文件服务系统,上传的这个动作是一个事件,触发了绑定该事件的函数进行在线解压,然后从文件系统拉取解压后的文件进行以上方案的解析。

  • 优势

  1. 保证文件的安全性和整体性,可以设置文件的访问权限,保证文件上传时候的不丢失问题。
  2. 通过Serverless技术保证上传的速度、并发量。
  • 劣势

  1. 云函数的支持性比较差,不是很通用。
  2. 资源包的大小会影响上传和解压效率。

引申:Serverless 的计算产品-云函数

  1. 云函数提供了一种直接在云上运行、无状态的、短暂的、由事件触发的代码能力。
  2. 云函数的运行是由事件驱动,在有事件的到来,云函数就会启动运行,而且是按需启动,不会占用很多资源。一次HTTP请求,一次文件上传,一次数据库修改,一个动作都能作为一个事件。

 

每次请求都会触发一个解压云函数的事件驱动,解压函数会启动一个实例来执行脚本,完成本次请求的解压工作,具体的解压脚本代码本文暂不做阐述。

当用户上传zip包到规定的bucket目录下的时候会触发云函数,云函数会启动一个实例来执行脚本,帮用户完成压缩包的解压。

五、资源包带来的好处

资源包这种方案在我们团队已经使用非常的成熟了,解决适配各种不同的样式配置,包括官网首页、官网产品详情页等不同的页面。现在系统运行比较稳定,我们这套解决方案也是比较成熟的。

运营同学只要在一个入口上传不同类型的资源包,能完成各种样式、各种规则的页面配置,真正达到单一配置,多套样式的功能的实现。

这套机制不仅提升了我们运营同学的50%的运营效率,更为我们解决了大促、节假日特殊样式的配置场景。

六、资源包的弊端

  1.  资源包的制作不可控,不同制作者制作出来的资源包带来的适配成本、对接成本、测试成本都是很大的。
  2. 资源包还是比较重量级的,一些动效、图片、适配资源比较大,对后台资源占用比较多,功能要求比较高。

七、未来展望

上述方案当然不是最优的方案,是这种场景下的的一种常用的解决方案,当然有更好的解决方案。未来我们考虑把常用配置项做成元组件形式,然后通过元组件之间的任意组合形成我们最终配置的页面。

运营只需要拖拽其中的元组件,自己想怎么组合就怎么组合,节日的组合成为一份页面,大促的组合也可以成为一份页面,很自由。这种随意组合的方式你可以称之为lowcode模式,这也是我们未来想做的东西。

八、写在最后

本文讨论了使用资源包的大体思路以及一些关键技术点的解决方案,各种不同方案对比。目前官网正在应用第三种方案,但是需要具备Serverless这种能力,我们在探索期间寻求了运维同学的帮助,编写在线解压函数的脚本远远没有上述来的简单。由于本篇限制并没有对Serverless的技术进行详细介绍,有兴趣的同学可以深入了解这方面的知识。

作者:vivo 官网商城开发团队


相关文章

猜您喜欢

  • springboot源码(4)

    我们上3个篇章写了springboot的自动装配、servlet组件的注入以及web容器完成内嵌的原理,如今..
  • 一个故事看懂内存条工作原理

    我是内存条我是一个内存条,刚刚从深圳的一个工厂里被消费出来,跟我一同的还有一批小同伴,长得跟我一模一样,下了..

网友评论

Copyright 2020 www.hao45.cc 【好下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式