来源：得物技术

• 这么信息全的页面，几乎所有客服域平台都要能直接访问查阅，一个页面如何多个系统使用，在保障客服同学使用体验的同时，还能节省开发同学维护成本。

• 信息量大数据源多导致页面加载慢，客服同学经常反馈卡顿，如何对页面首屏进行秒开优化，进一步提升客服同学的使用体验。

• 简单的改动也需要投入资源，信息模块复用率低，如何建设信息自由编排、信息模块拔插的能力，最大程度解放产研运同学生产力。

1、多实例iframe

2、单实例iframe搭配MF远程组件

3、技术实现

3.1、单实例iframe通信

• 详情接口响应后注册message事件。
• 监听iframe父级携带数据变化，更新本地页面数据。
• 本地页面交互事件被远端触发，发送当前的数据给远端做自定义交互。

/** Vue3 *//** 1. 详情接口响应后注册message事件 */onMounted(() => {   /** 请求详情接口 */  fetchOrderDetail(() => {    /** query上打上iframe标签，用于确定注册时机 */    route.query.iframeRoute && watchParentMessage()  })})
/** 2. 监听iframe父级携带数据变化，更新本地页面数据 */const watchParentMessage = () => {  window.addEventListener('message', event => {    const orderNo = event.data.data.orderNo    if (event.data.type === 'ORDER_CHANGE' && orderNo) {      /** 更新订单信息*/      initStream(orderNo)    }  })}/** 3. 本地页面交互事件被远端触发，发送当前的数据给远端 */window.parent.postMessage(  /** payload: 携带的数据*/  {    type: 'workbenchRoute',    params: {      /** 跳转退货详情页 */      name: 'refundDetail',      query: {        // 携带数据      },    },  },  /** orgin: 如果想要传递给任意窗口，可以将这个参数设置为'*' ，为了安全起见，不建议设置为'*'*/  '*')

• 页面初始化时注册message事件。
• 监听本地订单单号变化，将新的数据传给远端。
• 监听远端交互和数据变化，根据交互类型做不同的本地处理。

/** Vue2 */
/** 1. 页面初始化时注册message事件*/mounted() {    window.addEventListener('message', this.callBack, false)},/** 2. 监听本地订单单号变化，将新的数据传给远端*/watch: {    orderNo(newOrderNo) {        /** 在iframe的contentWindow属性上挂载postMessage方法*/       detailIframeRef.contentWindow.postMessage(        /** payload: 携带的数据*/        {          type: 'ORDER_CHANGE',          data: {            orderNo：newOrderNo,            //其他数据          },        },        /** orgin: 如果想要传递给任意窗口，可以将这个参数设置为'*' ，为了安全起见，不建议设置为'*'*/        '*',      )    },},/** 3. 监听远端交互和数据变化，根据交互类型做不同的本地处理 */method: {    /** callBack: 远端事件被触发后，处理本地回调逻辑 */    callBack(event) {      try {        if (event.data.type === 'workbenchRoute') {         switch (event.data.params.name) {            case 'orderdetail':              //跳转订单详情的handler              break            case 'detail':              //跳转工单详情的handler              break            // 其他交互            default:               //兜底处理          }        }    } catch(error) {      //异常处理    }}
3.2、远程组件通信

• 配置webpack的MF插件，将整个订单详情页exposes出去
• 维护详情页的props

/** 配置webpack MF插件，将订单详情页exposes出去*/ new ModuleFederationPlugin({    filename: 'remoteEntry.js?[hash]',    library: { type: 'window', name: 'app_ticket' },    name: 'app_ticket',    shared: {    /** 需要共享的依赖 */    },    exposes: {        /** 提供订单详情远程组件*/      './OrderDetail': './src/views/orderdetail/Index.tsx',    },  }),
内容使用方

• webpack配置需要建议通信的远端应用
• 使用defineAsyncComponent注册组件
• 像本地组件一样使用远程组件

/** 1.webpack配置远端应用 */remotes: {  app_ticket: getRemoteUrl('app_ticket'),},/** 2. 使用defineAsyncComponent注册组件*/'OrderDetail': defineAsyncComponent(() => import('app_ticket/OrderDetail')),/** 3. 像本地组件一样使用远程组件*/<OrderDetail orderNo={orderNo} {...props} />

4、总结

1、缓慢原因

2、接口调用优化

2.1、技术方案

 /** 处理promise，保证promise.all使用时相互独立 */export const handlerPromise = (api, params) => {  return new Promise(resolve => {    api(params)      .then(resolve)      .catch(() => resolve({ error: true }))  })}
/** 详情页首屏请求函数 */ const fetchOrderDetail = (callback?) => { /** 使用handlerPromise封装过的promise，保证有一个报错不干扰其他接口请求 */  Promise.all([quickDetail(), firstLevel1(), firstLevel2()])    .then(([quickDetailData, firstLevelData1, firstLevelData2]) => {      // 快详情接口      !quickDetailData?.error && quickDetailHandler(quickDetailData)      // 第一梯队接口调用：不依赖详情反参的首屏信息接口      !firstLevelData1?.error && firstLevelHandler1(firstLevelData1)      !firstLevelData2?.error && firstLevelHandler2(firstLevelData2)      // 执行回调      nextTick(callback)    })    .then(() => {      // 第二梯队接口调用：依赖详情反参的首屏信息接口、非首屏接口        secondLevelHandler1()        secondLevelHandler2()    })  // 执行慢接口  fetchSlowOrderDetail()}

 /** 慢详情接口请求 */ const fetchSlowOrderDetail = () => {      slowLoading.value = true      orderApi        .getDetail(params)        .then(slowData => {          /** 防止快速切换订单导致的数据串台问题 */          if (slowData?.topInfo?.orderNo === orderNo.value) {            orderDetail.value = slowData          }          slowLoading.value = false        })        .catch(() => {          slowLoading.value = false        })    }

2.2、最终效果

3、大接口优化

• 接口协议由POST改为GET请求，GET的总耗时是POST的三分之二；Chrome下如果检测到GET请求的是静态资源，则会缓存，如果两次传输的数据相同，第二次以后耗费的时间将在10ms以内。另一方面也为后续工作台引入Service Worker技术打下基础。

• 新增快详情接口，将大接口中的响应耗时较高的字段整理出来，快接口不再包含这些字段。这些高耗时的字段新增字段级别的loading效果，为了避免快慢接口耗时差异较大，导致一些经验丰富的客服同学误以为快接口没返回数据的字段是空数据，但是这个loading数量不会超过3处，保持页面的整洁易读。

4、总结

1、仍面临的问题

2、信息编排能力建设

2.1、Schema格式

schemaData : [    {        label: '订单类型'        text：'普通现货'        children: [            {                id: 'orderTypeDetail'                text: '详情',                show: true,                toolType: 'linkBtn', /** linkBtn, primaryBtn, tag */                eventType: 'click', /** dbclick, hover*/                interactiveType: 'popover', /** modal， popover， message*/                   children: [                     //** popover弹出的内容 */                    { label: , text: '', children: //..}]                    { label: , text: ''}                ]               },            {                text: '晚到必赔',                show: true                toolType: 'tag',             },            {                text: '退运服务',                show: true                toolType: 'tag',             },        ]    },    {        id: 'tradeStatus'        label: '支付状态'        text：'已经支付'        children: [           {                text: '七天风控',                show: true                toolType: 'tag',             },        ]    }],
2.2、高级配置

/** 信息元素枚举*/enum INFO_ElEMENT_MAP {    /** 订单类型详情按钮 */    ORDERTYPE_DETAIL: 'orderTypeDetail'
}
/** 信息元素*/const infoElementMap = {        INFO_ElEMENT_MAP.ORDERTYPE_DETAIL: {            /** 绑定事件 */            onClick: () => {                orderTypeDetailClickHandler()            },            /** 绑定样式 */            className: [styles.marginLeft],        },      /** 其他需要添加复杂交互和样式*/    }

2.3、模版解析

 const SchemaRender = () => {     //TODO 健壮性代码      return (        <div>          {schemaData.length ? (            <Row>              {schemaTemplate.map(item => {                // 分隔符                 if (item.key === TemplateKeyEnum.dividedLine) {                  return <Divider />                }                return (                  <Col span={12}>                    <InfoItem                      key={item.key}                      label={item.label}                      text={item.text}                      infoList={item.children.map(child => {                        return {                          text: popoverRender(child),                          hide: !child.show,                        }                      })}                    />                  </Col>                )              })}            </Row>          ) : (            <Skeleton title={false} active paragraph={{ rows: 3 }} />          )}        </div>      )    }

3、模块插拔能力建设

3.1、技术方案

3.2、最终效果

• 大屏下页面布局：

• 小屏下页面布局（1440*900以下）：

• 工单详情使用订单详情中的物流记录、服务记录订单信息模块：

4、总结

1、灰度方案

1.1、技术方案

• 根据来源区分使用一线AB方案还是二线AB方案，伪代码如下：

 /** 获取来源区分IM、工单灰度组信息 */watch(  () => props.platformCode,  code => {    try {     switch (code) {       case PLATFORM_TYPE.IM:         /** 一线灰度走一线灰度接口 */        isGray.value = true        break       case PLATFORM_TYPE.TICKET:        /** 二线灰度走二线灰度接口 */        isGray.value = true        break       default:        isGray.value = false    } catch {      isGray.value = false    }  },  {    immediate: true,  })

• 在主页面根据灰度情况渲染详情模版：

 return () => isGray.value ? (    <>      <Button type="link" onClick={clickHandler} >        返回{isOld.value ? '新版' : '老版'}      </Button>      {isOld.value ? <OldDetail {...props} /> : <Detail {...props} />}    </>  ) : <OldDetail {...props} />

1.2、总结

2、埋点方案

• 订单详情页停留时间：有效的停留时间越长一定程度能说明页面的查阅费力度越高。
• 订单详情页跳出率：跳出率越高说明当前订单详情信息不能满足客服的查阅需求，需要去其他页面查看。是信息不全、不清晰的一种体现。而且跳出页面会重新加载新的页面，等待时间会长于页面内获取信息，增加客服获取信息的时间。

2.1、页面停留时间

• 确定路由：https://xxx-xxx.xxx/orderdetail/:id
• 只需要考虑上一个路由是订单页面的情况
• 数据过滤：小于3s，大于30min视为无效数据
• 如果最近的路由是订单页面，则重置时间

/** 数据上报 */const uplog = (current, last, constant, type) => {  /** b: 只用考虑上一个路由是订单页面的情况 */  if (constant === last) {    const nowTime = getNowTime()    const stayTime = nowTime - stayOrderDetailTime.currentTime    /** c: 小于3s，大于30min视为无效数据 */    if (stayTime > 3000 && stayTime < 1000 * 60 * 30) {      orderDuLog('ORDER_STAY_TIME', {        orderNo: orderNo.value,        stayTime,        type,      })    }    stayOrderDetailTime.currentTime = nowTime  }  /** d：如果最近的路由是订单页面，则重置时间*/  if (constant === current) {    stayOrderDetailTime.currentTime = getNowTime()  }}
/** 监听路由 */watch(  () => {    return { name: route.name, id: route.params?.id }  },  throttle(    (currentRoute, lastRoute) => {      /** 从工单出发：只用考虑上一个路由是订单页面的情况 */      uplog(currentRoute?.name, lastRoute?.name, `${globalConfig.backstageCode}_orderdetail`, 'routeChange')    },    100,    { leading: true, trailing: false }  ),  {    deep: true,    immediate: true,  })

2.2、页面跳出次数

2.3、总结

1、总结

• 关于动态路由页面的多平台复用：跨技术栈使用单实例的iframe通信，配合双向的postMessage事件监听用户行为触发交互；微应用内使用Module Federation通信，在保障客服使用体验的同时，节省了开发维护成本。
• MF的首屏需要1279ms，非首屏只需428ms，渲染时间降低了6倍。
• 单个页面的内存占用减少到了之前的1/10以内。
• 关于大数据量的页面首屏优化：基于业务优化接口调用时机，保证同时不超过6个接口请求，避免出现Stalled耗时，对大接口RT进行优化，场景允许的话可改为GET协议类型，降低首屏响应时间，提升客服体验。
• 首屏请求6个以上接口时不再出现Stalled耗时，大接口改为GET后总耗时是POST的2/3。
• 快详情接口RT只需要平均190ms，从之前大接口的470ms下降了41%，首屏渲染时间从873ms降至376ms，下降了57%，95分位567ms，下降了62%。
• 关于信息编排、模块拔插能力建设：根据业务分析字段特点，约定合适的Schema格式使得信息内容可灵活配置；对用户的职能特点、设备情况进行分析，使得用户所访问页面的布局、内容做到区分，做到给用户看到合适的内容，降低坐席的查询信息的费力度。
• 订单需求开发成本能够降低66.7%。
• 老版页面平均停留时间15.6s，新版页面的平均停留时间8.5s，客服每次查询信息的时长缩短7.1s，根据订单详情页的PV可换算出每日可降低客服同学的查询时长。
• 老版页面跳出率11.4%（约8.7次访问跳出1次），新版页面跳出率7.92%（约12.6次访问跳出1次）。客服查看订单信息时跳出率下降了3.48pp。

2、后续规划

• 模块联邦虽然很快，但是对公共依赖维护成本较大，也会导致应用构建速度下降。后续会基于无界对订单子应用进行迁移，建设专门存放远程组件的应用容器，提升子应用的秒开和快速切换体验，同时也能提升工单子应用构建速率，解耦横向订单功能的发布。可期待后续内容。

  ---

  
  

*文/昌禾