从一次qp瘦身实践谈qp包Size治理

背景

qp文件是去哪儿网泛前端方案（hy、qrn、yis等一众）项目构建后用于部署的单文件容器，目前机票客户端各主要业务模块均已通过去原生达成不跟版化发布，在过去一年的高频业务迭代过程中我们更多在关注研发架构的演进和运行时性能治理，而对构建产物的size审查和优化是比较被动滞后。在传统的开发方案下有相对成熟的官方/三方工具能够对构建产物进行分析来提供用于辅助优化决策的信息和数据，而对qp项目和构建产物的size优化仍停留在纯人工分析、人治人管的阶段，在去人工背景下我们期望将工程师在这方面的经验转化为程序和算法，逐步向半自动化、自动化方向转移，提高此类工作的研发效率。本文介绍机票国内主流程的qp瘦身实践过程，以及附属产物Jeeves在qp size治理中的应用。

关于qp文件的细节知识移步这里（限公司员工访问）

瘦身实践过程，以机票国内主流程部署单元major bundle为例

Step.1 收集信息

webpack构建处理源码的过程已经移除了一部分无用代码，所以通常我们会优先分析部署产物而非源项目本身。对于分析部署包组成，关于基于官方技术开发的app瘦身相关的经验、方法和工具已比较成熟这里不再赘述，而qp包的分析之前还没有看到过相关工具，工欲善其事必先利其器，我们做了jeeves-cli提取必要的信息以供分析决策。关于机票jeeves-cli的介绍和使用移步这里。
使用 jeeves qp before_optimize_f_major_bundle_rn.qp -i -l 获取qp包成分信息和肥胖/超标资源检查。

图片.png

肥胖、超标资源检查如下：

图片.png

Step.2 问题挖掘

• [1] jeeves检出了很多超标图和肥胖图资源
• [2] 经验上对于订票这类偏工具性的应用，图片资源1MB多占整体31%，iconfont才18KB，图片类尺寸占比和绝对值都是不正常的。
• [3] 核对项目中的99个内置图片，发现1张是并不会被使用。
• [4] js代码已经被混淆，但混淆程度不高，且存在无法在构建时侦测到的无用代码。

Step.3 解决策略

• [A] 针对[1]和[2]，使用jeeves-cli进行图片压缩率优化，目前是基于tinypng方案做批量处理。
• [B] 针对[3]，删除无用资源
• [C] 针对[4]，考虑这部分在最终的apk/ipa部署下压缩后代码的潜在优化收益低和短期验证成本较高，本次不做优化。

Step.4 执行

对于[B]策略，核对不需要再使用的资源并移出图片内置清单。
对于[A]策略，jeeves提供了提取qp内所有图片并基于tinypng做批量压缩的能力。使用 jeeves qp -c 对qp内图片文件批处理，执行 jeeves qp before_optimize_f_major_bundle_rn.qp -c处理图片。

图片.png

Step.5 一次优化后做信息核对

打新qp包后再次执行 jeeves qp after_optimize_f_major_bundle_rn.qp -i -l

图片.png

已经没有了超标尺寸图片，但仍存在存在肥胖资源。核对后发现其中4张是线上已经配置下线但没有下代码的功能，将其从内置清单中移除，转为按需线上加载模式。

Step.6 二次优化后信息核对

图片.png

优化收益量化

图片.png

注：模拟qp压缩是指用zip直压qp包，等同于构建安卓/iOS部署文件apk/ipa时的压缩过程。

优化过程中的附属产物 -- Jeeves介绍

jeeves的定位是为诊断qp size类问题提供技术性数据和信息以进行辅助决策，并提供常用的优化支持。目前以工具形式 jeeves-cli 提供如下，详细说明见jeeves-cli使用说明

• qp治理
  .command('qp ')
  .option('-i, --inspect', '检视qp文件技术性详情')
  .option('-l, --lint', '资源合规性检查')
  .option('-c, --compress', '优化图片资源压缩率')
  .option('-e, --extract [destination]', '释放qp包内文件, destination为输出文件夹')
  .option('-d, --debug', '开启详细日志输出')
• 图片压缩
  .command('compress ')
  .option('-o, --outpath [输出路径]', '压缩物产出路径')
  .option('-d, --debug', '开启详细日志输出')
• zip压缩
  .command('zip ')
  .option('-o, --outpath [输出路径]', '压缩物产出路径')
  .option('-d, --debug', '开启详细日志输出')

关于qp size治理展望 -- jeeves-watch

这次qp瘦身虽然优化尺度较大，反映出在多项目并行迭代的背景下之前对qp size的治理是比较被动滞后的，除了在项目发布流程中加入审核环节，我们期望未来把这部分工作交给程序和算法，在qp size审查作为项目验收环节的一部分，自动化挖掘潜在和确定性问题并进行对应的项目阻断和周知归档操作。

图片.png

附qp瘦身策略总结

这里举例针对qrn项目的主要瘦身策略：

• 移除无用代码和资源（人为决策下掉无效AB实验、废弃功能等，构建前eslint检出无效代码和资源、构建时babel plugin移除无用代码）
• 更好的压缩算法和策略（tinypng等）
• 混淆
• 运行时加载
  • 运行时加载qp 替代 qp内置
  • 预缓存 + 线上加载替代内置
• 检测重复代码和资源、重复合并
• 降维替代
  • 资源
    • iconfont替代png/jpeg
    • webp/heif替代png/jpeg/gif
    • 需要无极缩放、动态着色场景下矢量替代非矢量
    • 小图代大图
  • 代码
    • dob/mobx替代redux/sega/dva，大幅减少联动和调优等工作所需的人为coding代码量
    • 换用更小体积依赖实现