GMTC2018 《基于多项目的离线缓存实现方案》 刘弟新

2020-02-27 150浏览

  • 1.基于多海外项目的离线缓存方案 刘弟新 掌众集团
  • 2.
  • 3.
  • 4.• 项目背景 • 离线缓存简介 • 遇到的问题 • 资源分离 • Lazy Preload • 改进效果
  • 5.项目背景 • Android WebView + H5 SPA • 多国家业务支持 • 多样性网络环境 越南 印尼 菲律宾 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% 79.0% 36.5% 59.9% 43.0% 6.0% 14.0% 1.0% 19.0% 1.5% 越南 印尼 2g 3g 4g wifi 25.0% 15.0% 0.1% 菲律宾
  • 6.Wha项t M目ar背ket景Need ? 线上资源较多 首页加载时间长 用户&带宽流量成本高 6 服务器压力大
  • 7.离线缓存简介 H5 Android 浏览器缓存机制 Hybrid缓存机制
  • 8.WebView request response init Apk cache.zip source-map.json CacheInterceptor Server source-map.json Exist && N Match? Y Cache Manager request response & cache update & diff
  • 9.遇到的问题 • 离线资源包越来越大 • 业务快速迭代时，部分页面加载还是存在大量等待
  • 10.资源分离-web资源拆分 src 越越南南 印印尼尼 菲律宾 越南 印尼 菲律宾 Dir Filter src DepScanner webpack Unsorted dist ChunkName Filter Source-map Generator Sorted dist File Filter
  • 11.资源分离-文件标识 Dir Filter src DepScanner webpack Unsorted dist ChunkName Filter Source-map Generator Sorted dist • 资源分类管理 • webpackChunkNa me 增加标识 • 每个页面组件增加页 面内入口模块标识 • ... File Filter
  • 12.资源分离-文件依赖扫描 Dir Filter src DepScanner webpack Unsorted dist ChunkName Filter Source-map Generator Sorted dist • DepScan • ChunkDepMap • ... File Filter
  • 13.资源分离-构建&分离 Dir Filter src DepScanner webpack Unsorted dist ChunkName Filter Source-map Generator Sorted dist • url-loader • assets-webpack-plugin • ... File Filter
  • 14.资源分离-筛选分离 Dir Filter dist +source-map.json src DepScanner webpack Unsorted dist ChunkName Filter Source-map Generator Sorted dist File Filter • chunk <==> distFiles • cacheSwitch • version • ...
  • 15.WebView request response init Apk cache.zip source-map.json CacheInterceptor Server source-map.json Exist && N Match? Y Cache Manager request response & cache update & diff
  • 16.Lazy Preload Init Init Index A B C Index A B C
  • 17.Lazy Preload Index A B D E C F G H I J KL MN Index A B D E C F G H I J KL MN
  • 18.改进效果 100ms 加载静态资源时间 99% 流量消耗 1.72MB 包大小
  • 19.
  • 20.
  • 21.
  • 22.