当前位置: 首页 > 后端技术 > Node.js

技术实践一期|友盟+开发者平台Node.js重构之路

时间:2023-04-03 17:40:13 Node.js

一、问题背景本项目提供友盟+SDK下载、相关辅助工具、集成demo等相关功能。由于原版SDK的升级配置文件比较复杂,需要在java端查询整合多个文件,获取前端界面选择的内容数据,升级SDK,需要手动拉取oss文件到服务器本地缓存,维护成本高。并且长期没有相关的产品和开发文档,所以在本次业务升级中对应用进行了重构。2、改造目标●新版本体验:SDK_开发者中心-友盟+●满足升级功能迭代,包括新增多端融合功能等,全新的视觉体验。●将java端迁移到node,直接连接oss,简化配置文件,节省“人工智能”的升级维护成本。●下载由后台转到OSS直连下载,大大提高了下载效率。●SDK端原始文件统一格式为zip,文件存储与服务器端分离,提高后续可维护性。●使用SSR服务端渲染提高SEO优化。三、下载方案1、页面勾选原下载方案,将文件复制到后台(后台已缓存原文件),创建对应目录,合并压缩成最终zip文件。压缩完成后,后端直接Stream返回zip。下载速度很慢。并且每次都需要手动拉取缓存的原始文件。缺点:后端下载速度较慢。在服务器端存储太多大文件的理由。2.新的下载方案在编译部署时将原始文件从OSS拉取到服务器,并保持缓存文件的路径层级与OSS一致。根据页面上的选择,先查看OSS是否有缓存。如果没有缓存,则在后端复制各个SDK压缩包的原始文件,复制到各个层级对应的文件夹中,在各个文件夹中解压、合并、整合。最后形成final文件夹,将final文件夹压缩成zip上传到OSS,获取OSS分享链接直接下载。四、技术选型对比1、原始文件缓存方式对比原始SDK以统一的zip格式存放在OSS中,所有原始文件压缩包约1.5G。根据页面操作,将各个SDK拉取并集成到一个文件中。●不推荐!直接连接OSS拉取对应的SDK。OSS提供了一个读取文件夹和内容的api,可以递归地将文件夹中的所有文件转换为一个二维列表。为此,您需要解压缩所需的原始zip以阅读内容。解压后,原始文件比zip格式大。大约3倍,整体速度明显降低。●推荐!每次部署应用时,都会从app.js中拉取原始OSS文件到服务器缓存中,当缓存完成后,复制到缓存中,没有缓存时,OSS拉取底层文件。2.文件夹压缩/解压zip工具对比由于原文件中有软链接,合并时需要注意!2.1.zlib模块●优点:可以对数据进行压缩和解压,减少数据量,加快传输速度。压缩/解压缩文件。●缺点:无法压缩/解压缩文件夹。//设置Accept-Encoding:gzip,deflateinHTTPrequestheader//压缩/解压文件letlib=require('zlib')letgzip=zlib.createGzip()letrs=fs.createReadStream('./a.js')letws=fs.createWriteStream('./a.js.gz')rs.pipe(gzip).pipe(ws)2.2、node-stream-zip优点:zip文件压缩/解压库,使用方便,可操作文件/文件夹。●缺点:不识别解压文件中的软链接,导致无法打开软链接的错误。//解压缩zip文件constStreamZip=require('node-stream-zip');constzip=newStreamZip.async({file:'./common.zip'});等待zip.extract(null,'./');等待zip.close();2.3。compressing●优点:可以同步/异步压缩或解压文件/文件夹,相关文件简单明了。●缺点:不识别解压文件中的软链接,导致无法打开软链接的错误。2.4.adm-zip●优点:直接将zip文件解压到磁盘或内存缓冲区。压缩文件并将它们以.zip格式或作为压缩缓冲区存储到磁盘。更新/添加新文件/从现有.zip中删除文件内容。●缺点:只能对当前压缩包进行操作,或者需要一个一个复制文件。但根据实际业务需要,勾选页面解压多个SDK压缩包,生成新的对应目录层级,然后整合为一个压缩包。2.5.archive●缺点:长期不更新,解压后内部文件有软链接,会反复生成真实文件。5、关于SSR服务端渲染为了更好的优化SEO,项目改造采用reactssr服务端渲染,框架结构为Node+Um-Egg+React+AndD+yk-cli。适用于静态页面展示应用。5.1SSR流程实现5.2initProps和state注意点●页面首屏渲染只会渲染Component.initProps数据。●state中定义的数据首屏不会被渲染,而是在前端组件中渲染。5.3SSR的优点●有利于SEO浏览器爬虫不会等到页面上的所有异步数据都加载完毕才抓取页面信息。服务端渲染返回前端页面获取所有首屏数据并生成html,即访问路由时获取。●有利于首屏渲染通过路由请求节点中的所有html内容,减少加载js文件的耗时过程,增加用户访问页面的时间。5.4SSR的缺点●增加服务端压力原来是客户端渲染,现在改为节点层处理生成html。当并发量很大时,服务器资源也会被占用。●维护成本会相对增加。如5.2所述。以上,一定要特别注意首屏的数据处理和项目引用的第三方库的数据处理!【文章作者:友盟+技术团队】??开发者中心改版,统一友盟SDK输出,包括APP、网页、小程序/小游戏、H5端,以及相关SDK下载和自动集成方式.重构前后下载效率提升了数倍,使用户体验迅速提升。同时,友盟+也将更加注重相关文档的输出,从功能描述到技术实现和用户体验,更好地帮助用户快速准确地解决问题。