《2018年基于多项目的离线缓存实现方案.pdf》由会员分享,可在线阅读,更多相关《2018年基于多项目的离线缓存实现方案.pdf(17页珍藏版)》请在三个皮匠报告上搜索。
1、基于多海外项目的离线缓存方案掌众集团离线缓存简介资源分离项目背景Lazy Preload改进效果遇到的问题Android WebView+H5 SPA多国家业务支持多样性网络环境1.0%1.5%0.1%14.0%19.0%15.0%6.0%43.0%25.0%79.0%36.5%59.9%0%10%20%30%40%50%60%70%80%90%100%越南印尼菲律宾2g3g4gwifi项目背景菲律宾印尼越南What Market Need?6项目背景服务器压力大线上资源较多首页加载时间长用户&带宽流量成本高离线缓存简介浏览器缓存机制H5AndroidHybrid缓存机制WebViewinit
2、Cache ManagerCacheInterceptorExist&Match?NYrequestresponse&cacheresponserequestupdate&diffServersource-map.jsonApkcache.zipsource-map.json遇到的问题离线资源包越来越大业务快速迭代时,部分页面加载还是存在大量等待DepScannerwebpackUnsorted distChunkNameFilterDir FilterFile FilterSource-mapGeneratorSorted distsrc资源分离-web资源拆分src印尼越南菲律宾印尼越南菲
3、律宾印尼越南资源分离-文件标识DepScannerwebpackUnsorted distChunkNameFilterDir FilterFile FilterSource-mapGeneratorSorted distsrc资源分类管理webpackChunkName 增加标识每个页面组件增加页面内入口模块标识.资源分离-文件依赖扫描DepScannerwebpackUnsorted distChunkNameFilterDir FilterFile FilterSource-mapGeneratorSorted distsrcDepScanChunkDepMap.资源分离-构建&分离De
4、pScannerwebpackUnsorted distChunkNameFilterDir FilterFile FilterSource-mapGeneratorSorted distsrcurl-loaderassets-webpack-plugin.资源分离-筛选分离DepScannerwebpackUnsorted distChunkNameFilterDir FilterFile FilterSource-mapGeneratorSorted distsrcchunk distFilescacheSwitchversion.dist+source-map.jsonWebViewinitCache ManagerCacheInterceptorExist&Match?NYrequestresponse&cacheresponserequestupdate&diffServersource-map.jsonApkcache.zipsource-map.jsonIndexACBIndexACBLazy PreloadInitInitIndexACBDEHIJKLMNFGIndexACBDEHIJKLMNFGLazy Preload加载静态资源时间100ms99%1.72MB流量消耗包大小改进效果