京喜跨端小程序开发实践

1. 京喜跨端小程序开发实践沙冥冥京东·凹凸实验室高级前端开发工程师

2.

3. 沙冥冥京东·凹凸实验室负责京喜首⻚技术架构及核心开发

4. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结

5. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结

6. 京喜社交电商平台整包体积 20M 100+ 开发者峰值近亿级请求量

7. 京喜社交电商平台微信小程序 QQ小程序京东小程序 H5

8. 京喜社交电商平台 • 高效的跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控

9. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结

10. 跨端实践 X Ta r o

11. 跨端实践 | 项目结构首⻚项目 • 多技术栈兼容 • 单⻚编译 • 同步的多端调试完整小程序项目多端适配业务开发其他业务编译构建目标代码

12. 跨端实践 | 跨端语法 • 内置环境变量 • 条件编译 • 多端文件后缀 if(process.env.TARO_ENV === 'weapp'){ } if(process.env.TARO_ENV === 'h5'){ }

13. 跨端实践 | 跨端语法 • 内置环境变量 • 条件编译 • 多端文件后缀 /* #ifdef weapp /* #endif */ /* #ifdef h5 /* #endif */ */ */

14. 跨端实践 | 跨端语法 • 内置环境变量 login / • 条件编译 ├── login.weapp.js • 多端文件后缀 └── login.js ├── login.h5.js

15. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结

16. 首⻚性能优化 | 问题 • 虚拟列表 • 低端机降级 • 体验评分

17. 首⻚性能优化 | 虚拟列表——组成外层容器 onScroll() + update()

18. 首⻚性能优化 | 虚拟列表——问题 • 结构改造 • 卡片高度计算 • 白屏优化

19. 首⻚性能优化 | 虚拟列表——结构改造⻚面容器外层容器 onScroll() update() onScroll() Event update()

20. 首⻚性能优化 | 虚拟列表——卡片高度计算 1 2 3 SelectorQuery vs compute 4 5 6 7

21. 首⻚性能优化 | 虚拟列表——卡片高度计算

22. 首⻚性能优化 | 虚拟列表——卡片高度计算 let sum = 345; if(a){ if(b){ if(c){ if(d){ // sum sum sum sum sum +=50; +=50; +=75; +=50; } } } }

23. 首⻚性能优化 | 虚拟列表——卡片高度计算

24. 首⻚性能优化 | 虚拟列表——卡片高度计算 1rpx => 0.42px => 绘制 1rpx => 0.426667px => 计算

25. 首⻚性能优化 | 虚拟列表——卡片高度计算 let sum = [345]; if if if if (a) (b) (c) (d) { { { { sum.push(50); sum.push(50); sum.push(75); sum.push(50); } } } } if (process.env.TARO_ENV === 'weapp') { return sum.reduce((pre, next) => { return pre + transformToRpx(Math.floor(transformFromRpx(next))) }, 0) } else { return sum.reduce((pre, next) => pre + next, 0) }

26. 首⻚性能优化 | 虚拟列表——白屏优化⻣架图⻣架图⻣架图

27. 首⻚性能优化 | 虚拟列表——白屏优化

28. 首⻚性能优化 | 虚拟列表——白屏优化 • 结构改造 • 卡片高度计算 • 白屏优化

29. 首⻚性能优化 | 低端机降级 • 划分标准 • 优化内容

30. 首⻚性能优化 | 低端机降级——标准 • 未知+低端：8%；高端机：92%

31. 首⻚性能优化 | 低端机降级——标准 • 部分被划分为高端机的机型体验卡顿 • 与产品渠道的用户划分比例不符

32. 首⻚性能优化 | 低端机降级——标准样机校验 + 参数调整未知+低端：33% ；高端机：67%

33. 首⻚性能优化 | 低端机降级——改造内容 • 轮播图改单图 • 动图改静图 • 大图改小图 • 去除跨模块关联 • 去除时间关联

34. 首⻚性能优化 | 体验评分 • 首屏dom数 • 图片大小 • setData调用频率、内容大小

35. 首⻚性能优化 | 总结 • 虚拟列表 ——结构改造/卡片高度计算/白屏优化 • 低端机降级 ——划分标准/优化内容 • 体验评分

36. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结

37. 代码体积优化 | 背景

38. 代码体积优化 | 问题瘦身体积 === 小程序代码包文件体积？

39. 代码体积优化 | 标准 • 详情 -> 基本信息 -> 上次预览/上传

40. 代码体积优化 | 常⻅且收益大 • 代码分包 • 依赖分析：移除未使用内容 • 避免使用本地资源（图片） • 所有类型都进行压缩和注释清理

41. 代码体积优化 | 目录 • 继承属性 • 样式补全 • 样式命名优化

42. 代码体积优化 | 继承属性 border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-weight font-style font-variant font letter-spacing list-style-type list-style-position list-style-image list-style line-height orphans page-break-inside quotes text-align text-indent text-transform visibility white-space widows word-spacing @font-face 减少10KB，占项目总量630KB的1.6%

43. 代码体积优化 | 样式补全 .box { display: flex; display: -webkit-flex; }

44. 代码体积优化 | 样式补全样式补全项目代码代码上传样式补全项目代码

45. 代码体积优化 | 样式补全开发者自己补全开启编译补全减少58KB，占项目总量630KB的9%

46. 代码体积优化 | 样式命名优化 UglifyJs function a(){}; function b(){}; function c(){};

47. 代码体积优化 | 样式命名优化 <view className="banner">模板</view> <view className="a">模板</view> .banner { /* 样式定义 */ } .a { /* 样式定义 */ }

48. 代码体积优化 | 样式命名优化——CssModule .banner { /* 样式定义 */ } export default { banner : 'a' } /* 编译生成 */ import styles from ‘./index.module.scss.map.js' <view className=“{{styles.banner}}“>模板</view>

49. 代码体积优化 | 样式命名优化 weapp-css-modules 单字⺟编排 <view className="a">模板</view> .a { /* 样式定义 */ } 移除map文件减少50KB，占项目总量630KB的7.9%

50. 代码体积优化 | 效果 631KB • 继承属性 • 样式补全 • 样式命名优化 wxs json 465KB wxml wxs wxss json wxml wxss js js 瘦身前瘦身后

51. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结

52. 系统监控 | Badjs监控 Kibanna • 数量大 • 模块划分不明显 • 实时反馈信息少

53. 系统监控 | Badjs监控内容平台上报告警监控平台

54. 系统监控 | 可用率监控 • 正确/错误/总数 • 周期性

55. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统稳定性提升 • 总结

56. 总结性能优化虚拟列表跨端实践低端机降级项目结构体验评分跨端语法体积优化系统监控继承属性 BadJS监控样式补全可用率监控样式命名优化

57. 总结在因地制宜和极限优化里探索，论怎么戴上小程序的镣铐⻜起

58.

59.