滴滴出行小程序：体积优化实践

滴滴出行小程序体积优化实践

2019年下半年，为了将微信钱包/支付宝九宫格入口的滴滴出行迁移为小程序，团队对小程序进行了大量的功能升级与补全。在整个过程中也遇到并克服了一系列问题和挑战，其中包体积问题尤为突出。

微信对小程序包体积的要求是总体积不得超过2M，其中代码部分不得超过1M，资源部分不得超过1M。而滴滴出行小程序在迁移之初，代码部分已经超过了1M，资源部分也接近1M。为了满足微信的要求，团队对小程序进行了全面的体积优化。

一、代码优化

1. 压缩混淆

压缩混淆是代码优化的基本手段，可以有效地减少代码体积。滴滴出行小程序使用 webpack 对代码进行压缩混淆，可以将代码体积减少约30%。

2. Tree Shaking

Tree Shaking是webpack的一个功能，可以自动删除未被使用的代码。滴滴出行小程序使用 Tree Shaking 可以将代码体积减少约10%。

3. 懒加载

懒加载是一种延迟加载资源的技术，可以有效地减少首屏加载时间。滴滴出行小程序对部分非关键资源使用了懒加载，可以将首屏加载时间减少约20%。

4. 分包

分包是一种将小程序拆分成多个子包的技术，可以有效地减少单个包的体积。滴滴出行小程序将小程序拆分成了多个子包，可以将单个包的体积减少约50%。

5. 资源按需加载

资源按需加载是一种只有在需要时才加载资源的技术，可以有效地减少网络请求数和加载时间。滴滴出行小程序对部分非关键资源使用了资源按需加载，可以将网络请求数减少约30%。

二、资源优化

1. 图片压缩

图片是小程序中常见的资源类型，也是影响小程序体积的重要因素。滴滴出行小程序对所有图片进行了压缩，可以将图片体积减少约50%。

2. 字体压缩

字体也是小程序中常见的资源类型，也是影响小程序体积的重要因素。滴滴出行小程序对所有字体进行了压缩，可以将字体体积减少约30%。

3. 音视频压缩

音视频是小程序中常见的资源类型，也是影响小程序体积的重要因素。滴滴出行小程序对所有音视频进行了压缩，可以将音视频体积减少约40%。

三、网络请求优化

网络请求是小程序中常见的操作，也是影响小程序性能的重要因素。滴滴出行小程序对所有网络请求进行了优化，可以将网络请求时间减少约20%。

四、性能监控

性能监控是发现和解决小程序性能问题的重要手段。滴滴出行小程序使用了腾讯云的云诊断工具对小程序的性能进行了监控，可以及时发现和解决小程序的性能问题。

五、用户体验优化

小程序的体积优化最终目的是为了提升用户体验。滴滴出行小程序通过一系列的体积优化措施，可以有效地减少小程序的加载时间和卡顿率，从而提升用户体验。

滴滴出行小程序的体积优化实践取得了显著的成效。小程序的代码体积从1M减少到了600K，资源体积从1M减少到了400K，整体体积从2M减少到了1M。小程序的加载时间从5秒减少到了3秒，卡顿率从10%减少到了1%。小程序的用户体验得到了显著的提升。

滴滴出行小程序的体积优化实践对小程序开发人员具有很强的参考价值。小程序开发人员可以通过借鉴滴滴出行小程序的体积优化经验，来优化自己的小程序，从而提升小程序的性能和用户体验。