关于前端:京东门详一码多端探索与实践-京东云技术团队

本文次要讲述京东门详业务在撑持过程中遇到的窘境，面对问题咱们在效率晋升、品质保障等方向的摸索和实际，在此将实际过程中问题解决的思路和计划与大家一起分享，也心愿能给大家带来一些新的启发

一、背景

1.1、京东门详介绍

1.1.1、京东门详业务

门店详情页简称门详，门详业务蕴含门店详情、列表、凑单、搜寻、到店等页面，最早于 2020 年在京东主站 APP 上线，最后是作为京东到家线下优质商家以线下店模式入驻京东主站，用户能够在门详内一站式实现门店信息查看、商品浏览、配送时效确认、领券、加车、下单等残缺购物流程。后续随着业务的倒退，门详陆续承接了天选、小时购、药急送、前置仓等更多的业务模式场景，逐步造成了以即时批发为个性，笼罩到家、到店场景，承接线上线下的通用综合型业务零碎

1.1.2、门详业务状态

门详业务波及到家门详（小时购、药急送）、到店门详（POP、万家）；技术栈波及京东小程序[2]、微信小程序[3]、H5、RN；页面波及门店首页、凑单、搜寻、评估、资质、列表等 20+

1.2、门详业务反对过程中面临的痛点

• 京东 app 和微信小程序两端门详性能差别较大
• 因历史起因面临同时保护京东 app 和京购小程序两套门详业务需要
• 业务布局需求量微小，双端需要迭代频繁，研发资源缓和无奈短时间消化
• 双端业务场景及不同的技术栈对品质保障带来较大挑战

1.3、京购小程序业务方对门详的诉求

• 冀望将京购小程序门详性能对齐京东 app
• 新需要迭代心愿疾速同步到微信域
• 冀望研发需要吞吐量减少，能够疾速消化更多的需要

二、技术计划

2.1、后期计划调研

后期技术计划调研方面，咱们也理解了以后风行的各种多端框架像 RN、Flutter、Taro、uni-app 等，并从多端反对度、开发生态、前端框架反对状况、学习老本等各方面进行了调研比照；因为要反对京东 APP 及微信小程序，所以优先思考反对小程序的多端框架像 Taro3[1]、uni-app[10]、mpvue[11]、chameleon[12]、WePY[13]等；联合对前端框架兼容状况、京东小程序 [2] 的反对度及团队本身状况（团队对 React 比拟相熟）等因素，综合思考最终决定采纳 Taro 框架来进行多端化重构。

2.2、技术计划制订及实际

2.2.1、思考须要解决的问题

• 如何更好的反对京东小程序、微信小程序、H5 等多端需要？
• 如何在革新过程中防止新需要反复开发？
• 如何缩短研发交付周期？
• 如何能力在开发过程中提高效率？
• 如何在疾速迭代过程中保障研发品质？
• 如何灵便反对更多的业务场景？
• 如何保障页面性能？

2.2.2、制订解决方案

2.2.2.1、门详业务多端化解决方案

整个计划通过前端、服务端、平台独特构建一套残缺的多端化、楼层化解决方案，服务端基于 PaaS 化架构将门详性能拆分为多个畛域服务、畛域模型及扩大点，前端基于 iPaas 楼层、组件规范制订门详多端化、楼层化计划，治理平台通过奥德修斯（小程序交易数字化平台）与黄流数字化平台、iHub 平台能力买通，进行业务、页面、楼层、组件、数据等治理及上线公布，以下是整体解决方案全景图

2.2.2.2、门详前端技术框架

前端基于 Taro3[1] + React[8] + Recoil[7]为技术底座，将门详业务依照根底性能和根底组件准则拆分出网络、地址、埋点、优惠券、商卡、购物车等等 50+ 性能点，页面规范在 iPaas 页面协定上减少了门详渲染引擎局部，通过 iHub 平台治理楼层及代码，最终由页面容器进行渲染，以下基于门详面临的痛点在门详多端化过程中的架构图及咱们在施行过程中的一些计划

2.2.3、技术计划施行过程

1）业务性能归类及楼层和组件拆分

门详首页依照构造拆分成页头、列表、页尾、弹层等局部，依照楼层拆分成页面头部、门店信息、会员楼层、优惠促销、商品列表、结算条、购物车等 12+ 楼层组件

2）多端适配过程中的差别解决

尽管多端化框架曾经帮我咱们解决了跨平台开发场景，但不同平台之间因为底层原理及根底能力实现形式的差别，依然存在一些须要依照特定平台进行适配解决的工作量，咱们首先梳理门详中应用到的小程序平台 40+ 底层能力，列举并比照多端平台上的性能差别，针对平台差别制订两头适配层将 API 对立规范化（eg：登录、地址、埋点、路由、零碎信息等）

3）开发过程中的提效形式

• 组件化：组件封装分两层，底层是最小单元的性能组件，下层是最小可复用业务组件准则封装，无效的缩小了雷同和类似代码的冗余，同时也会定期通过工具 jscpd[4]进行代码审计进一步找出类似代码片段进行优化

• 楼层化：组合相干业务组件晋升能力最大复用度，例如：门店信息楼层、优惠促销楼层等等，并且楼层组件依照页面 schema 协定开发，反对局部能力可定制化
• MVVM 模式：利用 react hook[6]形式将原有页面中的逻辑及数据处理提练到 View Mode 层，使逻辑和 UI 之间清晰拆散易于保护，还能够显著进步代码重用机会

4）革新过程中新需要解决

旧门详采纳的京东小程序原生语言开发，新门详采纳 Taro+React 开发，在新门详未全量公布前新需要是须要双端反对的，这样也就意味着雷同需要会开发两次，通过摸索咱们通过混合开发模式 [9] 将 Taro 组件打包成小程序能够间接援用的原生组件，解决了新旧工程反复开发问题

2.3、门详小程序性能优化

门详在公测阶段也裸露了一些性能问题，咱们依照场景划分为两类：体验性能、启动性能，上面在这里和大家一起分享下相干案例及解决思路，心愿能给有类似窘境的小伙伴一些新的思路

2.3.1、体验性能优化

门详首页用户操作比拟频繁的就是分类切换、列表滑动等性能，也是用户反馈卡顿较为多的局部，上面针对以上两类问题进行相干案例剖析：

2.3.1.1、商品列表渲染性能优化

在门详多端化革新后，咱们通过问卷调研形式收集用户体验反馈，发现局部用户反馈在滚动商品列表时存在卡顿的景象。咱们利用 Taro 的 debug 环境日志进行剖析，发现分页加载时 setData 体积一直增大，耗时一直增长

debug 环境日志：

setData 耗时走势曲线：

经排查后发现是列表分页渲染时数据量较大导致丢帧。为了解决大范畴渲染及反复渲染问题，将原有的商品列表二维数组数据结构优化为链表 + 递归形式进行分层嵌套平铺渲染，数据上缩小多层级计算、视图上将分页加载渲染管制在单页内，以下为优化后的列表成果：

列表成果：

setData 耗时走势曲线：

优化前后分屏数据渲染耗时比照：

上图左侧为列表优化前成果，能够看到分页加载申请数据时的卡顿体感比拟显著，尤其是随着数据量的增大，卡顿工夫越来越长。右侧为优化后成果，在加载十几页之后仍然放弃高效的渲染性能。通过上述优化后每屏数据渲染耗时均维持在 200ms 左右，在分页数据加载较多的状况下渲染仍然放弃高效。

2.3.1.2、分类切换时列表渲染逻辑优化

在前置仓的业务撑持过程中，发现在某些非凡场景下切换分类时等待时间较长，用户体验较差。经剖析发现在分类列表加载数据时前端解决逻辑是在商品不满一屏时主动加载下一页数据，补全商品列表让用户能够看到更多的商品数据，而在接口进行轮询申请时导致用户等待时间较长

上图左侧为优化前分类切换时商品加载的逻辑，为了缩小用户期待时长对分类渲染逻辑进行优化（如图右侧），调整分类点击后的解决逻辑，只申请以后分类下数据，不再进行跨一级分类接口申请。分类渲染耗时从 n(接口申请次数)*250(接口申请耗时)+200ms(前端渲染耗时)缩小到 250ms+200ms。

2.3.2、启动性能优化

咱们针对门详小程序启动过程进行剖析，整顿启动的每个环节及对应的耗时数据，制订优化计划，优化次要方向如下：

• 京东小程序包压缩（将 jdapkg 文件进行 zip 压缩，文件大小从 8.6MB 升高到 3.4MB）
• 门详小程序模版包复用（防止多个小程序冷启动下载屡次）
• 门详小程序模版包内置进 APP（缩小小程序包下载耗时）
• APP 启动时进行小程序模版包预加载（缩小小程序冷启动耗时）
• 小程序引擎加载耗时优化（前置预热小程序引擎）
• 小程序引擎启动主线程卡顿优化（逻辑层与渲染层并行处理）
• 小程序代码构建包.jdapkg 优化（引擎公共代码抽离）
• 小程序信息接口由同步改为异步（线上均匀耗时缩小 158ms）
• 小程序网络库超时工夫及重试机制优化
• 门详主接口耗时优化（非首屏必要数据异步化）
• 门详业务代码包瘦身(代码优化、分包等，包大小从 3.4MB 升高到 648KB)

应用公共模版包，多个商家共用一个代码包，缩小反复下载

优化前门详小程序均匀启动耗时 2227.7ms，经以上优化措施施行后，整体启动耗时缩小到 954ms，启动速度晋升 57.6%，在门详小程序启动优化过程中咱们也失去了京东小程序引擎团队的大力支持，也借此机会示意衷心的感激！

2.4、ISV 共建计划及品质保障摸索

2.4.1、为什么要进行共建摸索呢？

对于业务侧大量的需要涌入，且有一部分并非门详通用性能属于非凡场景的个性化需要，而在研发资源紧缺的状况咱们也在思考如何能力晋升需要的吞吐量，为了更好的撑持业务，在与业务深度交换后发现局部业务侧也有本人的研发团队，能够自主个性化需要开发，单方沟通后达成共识在保障系统稳定性的同时，咱们在楼层化的根底上对系统进行改良反对黄流 ISV 平台接入，将局部独立楼层凋谢给业务侧自主接入，具体共建流程如下：

通过零碎 ISV 计划革新摸索后门详的个性化需要期待时长显著缩短，比照前两个季度个性化需要整体承接量增长 30% 以上，在需要大量增长的同时也是对系统和新架构的考验，为保证系统稳定性咱们对共建需要的接入、开发、上线等进行了共建流程标准制订及相干性能、品质等束缚

2.4.2、如何保障研发品质？

多团队多人合作过程中咱们也发现了一些问题，为了防止一些惯例问题在此咱们制订了相干的开发标准，并在整个需要开发上线过程中减少一些必要的校验环节，具体细节如下：

• 对立标准规范制订（目录构造标准、git 分支标准、代码编写标准、开发标准、文件标准、上线标准等）
• 需要评审后开发前进行前后端技术计划评审
• 利用工具（ESLint）进行代码标准扫描及语法标准查看
• 上线前进行 code review 及影响范畴预估
• 上线中 checklist（重要流程、外围性能、非凡场景）查看
• 上线后灰度切量且察看监控、异样、客诉等零碎
• 兜底计划反对线上页面、性能等一键降级

三、技术积淀与业务赋能

3.1、技术改造过程中的能力积淀

• 多端化楼层化开发框架，反对 ISV 形式接入共建
• 标准页面可编排楼层化协定，反对局部能力可动静配置
• 标准化楼层组件开发模版，缩小组件开发配置过程
• 根底性能库积淀根底 API 16 个、根底组件 25 个、业务组件 50+、打包插件 3 个
• 自研多端调试工具（nuclear）、发表公众号文章 2 篇、已进入国家专利局审核阶段专利 2 篇
• 构建工具 cola-cli、cola-server
• 小程序标准化门详赋能 SDK

3.2、多端化带来的收益

• 根底能力赋能新业务（前置仓门详、到店商详、POP 门详等）开发效率晋升 40% 以上
• 京东 app 上的门详新需要 95%+ 的性能是能够间接复用到微信小程序、H5 端，在无限的研发资源下大幅晋升了多端需要吞吐量
• 通过 4 个月的多端化革新后补齐了京购小程序中门详业务滞后 2 年多的需要
• 小程序赋能 20+（eg：京购小程序、京东超市小程序、小时购等）

门详多端化楼层化过程中积淀的开发框架、根底性能库、通用开发模版，也在到店门详、到店商详、pop 门详等业务中失去了较好的实际

3.3、前置仓门详疾速撑持

在京东 app 前置仓二期建设过程中小程序门详组件及性能复用率达到 95%+，基于多端化框架能力在 2 天内实现将前置仓门详赋能到京购小程序，业务侧提出冀望将前置仓门详能力能够引入到京东超市小程序（微信），基于后期门详多端化能力建设仅用 2 小时就实现了置仓门详能力赋能京东超市小程序（微信），也是在这个过程中咱们将门详多端化和楼层化能力与奥德修斯平台鉴权、模型治理、数据管理、可视化、配置化等能力相结合，通过脚手架与平台联合形式为业务方提供一键构建一站式赋能服务，通过这种标准化的形式既反对了京东超市小程序需要同时也裁减了黄流 SDK 中的标准化门详能力，一键触发 5 分钟既可实现整个黄流 SDK 赋能包的构建

四、将来瞻望

随着门详业务波及的场景日益增多，通用的楼层组件逐步也无奈满足所有差异化场景，然而全副楼层都放入公共模版包中无疑是对小程序包大小的考验，基于一码多端框架和咱们自研的小程序公布零碎思考，能够将门详批量小程序进行分类管理，构建时按类型按需构建，将一个公共模版包拆分成多个模版，可依照差异化形式别离构建公布

在京东前端技术域 iPaas2.0 搭建平台建设逐步欠缺同时，门详业务得益于多端化、楼层化框架，也为门详小程序反对多端可视化搭建迈出了后退的一步，为更多业务场景提供标准化门详

参考资料

[1]Taro3：https://taro-docs.jd.com/docs/

[2]京东小程序：https://mp-docs.jd.com/doc/dev/framework/-1

[3]微信小程序：https://developers.weixin.qq.com/miniprogram/dev/framework/

[4]jscpd：https://github.com/kucherenko/jscpd

[5]状态治理库比照：https://cloud.tencent.com/developer/article/1685891

[6]React hook：https://react.docschina.org/learn#using-hooks

[7]Recoil：https://www.recoiljs.cn/docs/introduction/getting-started

[8]React：https://react.docschina.org/learn

[9]原生我的项目应用 Taro：https://taro-docs.jd.com/docs/taro-in-miniapp

[10]uni-app：https://github.com/dcloudio/uni-app

[11]mpvue：https://github.com/Meituan-Dianping/mpvue

[12]chameleon：https://github.com/didi/chameleon

[13]WePY：https://github.com/Tencent/wepy

作者：京东批发 徐雄伟

起源：京东云开发者社区