Hybird-离线资本天生东西

2024年3月25日 155次阅读 来源: 卡洛斯

目次

  • 背景

  • 离线资本天生东西

  • 前端辅佐

背景

由于线上乐刻客户端 App 第一次翻开平台 H5 须要几秒的加载时刻，这个体验对用户来讲并不友爱，为了让用户跳转 H5 和跳转到原生一样的用户体验，就须要把 H5 相干的离线资本包下发给客户端，客户端就能够运用离线资本来替代现实收集要求，节约用户等待时刻和流量斲丧。为了满足以上需求，就须要制造打包剧本和东西，来满足一般的运维。

<!–more–>

离线资本天生东西

离线资本的天生，我们供应了一个东西能够打包出增量和全量升级包。道理是依据 git diff 去比较两次 commit，然后只关注 offlineResource (与 dist 目次平级，宣布包须要把 dist 目次内容拷贝到 offlineResource) 目次下的两次提交的文件差异，从而打出增量包。全量包就是全部 offlineResource 目次。

offlineh5 装置要领：

npm install -g offlineh5

运用体式格局：

offlineh5 -o package -r  http://github.com/xxx.git -f e24b8f0bb9a85c93c6965a906c1ea0448342821a -u gitusername -p gitpassword -z activity

参数申明：

-o 资本包输出途径
-r 堆栈地点
-u git 用户名
-p git 用户暗码
-f 从哪一个 commit 导出增量包
-z 打出来的资本包前缀

打出来的离线资本包须要放到七牛 cdn 存储：

http://oq78hrbgk.bkl.clouddn.com/upgrade/activity/activity.full_0.1.1.zip

前端辅佐

碰到的题目

之前前端打包只把 html, js, css 导出到 offlineResource 目次下，没有图片，由于图片都放在 cdn 上，当地就没有任何的原始图片，如许致使三个题目：

  1. node 剧本打出来的离线资本包并不包括图片。

  2. 纵然找到了原始图片，并不能保证原始图片的当地途径和cdn上的是一致的。

  3. 线上现有 cdn一级途径比较杂沓。

线上现有途径。

http://cdn.leoao.com/le-activ…
http://cdn.leoao.com/activity…
http://cdn.leoao.com/activity…

前端调解

  1. 运用 qtool 剧本猎取 cdn 上的一切图片，存放到当地作为原始图片，依据模块范例原始图片的途径。比方 le-activity 和 activity 须要一致成 activity。

  2. 前端打包不仅输出 html, js, css，同时每次打包须要把原始图片拷贝到 dist 目次下。同时宣布流程须要把 dist 目次内容拷贝到 offlineResource目次下。

  3. 依据 offlineResource 目次，运用 qtool 剧本运用该目次下的一切资本途径作为 cdn key，然后把一切资本上传到 cdn 上。今后前端在打包之前开辟的时刻，完全能够运用当地的路劲作为相对途径提早设置途径，而不必斟酌 cdn 的上传途径题目。

调解后，offlineh5 打包剧本能够依据 offlineResource 目次下的差别的 commit，diff 出两个版本之间差异，从而打出增量包和全量包。

运用 qtool

qtool 装置要领：

npm install -g qtool

上传资本:

qtool upload  -f uploadfolder -a RSxpQIxNIS2vo0vuQR3HX701ddS9fdlUnQ5jV8ul -s xCLWczC5V5kyy7H85MNKNYcXT4wx9k5OzT7YDVFk -b mybucket -k activity -h olf3t4olk.bkt.clouddn.com

下载资本:

qtool download  -f downloadfolder -a RSxpQIxNIS2vo0vuQR3HX701ddS9fdlUnQ5jV8ul -s xCLWczC5V5kyy7H85MNKNYcXT4wx9k5OzT7YDVFk -b mybucket -k activity -h olf3t4olk.bkt.clouddn.com

参数申明:

-f, --folder <string> 
    上传和下载目次
    
-k, --keypreffix <string> 
    上传的时刻，前缀会插进去到 key 的前面。
    下载的时刻，前缀会被用于过滤七牛的cdn url。
    
-a, --accessKey <string>
    access Key 七牛官网猎取
    
-s, --secretKey <string> 
    Secret Key 七牛官网猎取
      
-b, --bucket <string>
    上传和下载对象空间
    
-h, --hostUrl <string>
    七牛 host url，比方：http://cdn.xxx.com
    原文作者：卡洛斯
    原文地址: https://segmentfault.com/a/1190000009584105
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞