京东质量社区京东到家小程序 - 在性能及多端能力的探索实践 | 京东云技术团队

京东云开发者 · 2023年06月29日 · 3838 次阅读

一、前言

京东到家小程序最初只有微信小程序，随着业务的发展，同样的功能需要支持容器越来越多，包括支付宝小程序、京东小程序、到家 APP、京东 APP 等，然而每个端分开实现要面临研发成本高、不一致等问题。

为了提高研发效率，经过技术选型采用了 taro3+ 原生混合开发模式，本文主要讲解我们是如何基于 taro 框架，进行多端能力的探索和性能优化。

二、多端能力的探索

1.到家小程序基于 taro3 的架构流程图

框架分层解释

1.配置层：主要包含编译配置、路由配置、分包加载、拓展口子。

2.视图层：主要完成 App 生命周期初始化、页面初始化、注入宿主事件、解析配置为页面和组件绑定事件和属性。

3.组件库：是一个单独维护的项目，多端组件库包括业务组件和原子组件，可由视图层根据配置动态加载组件。

//渲染主入口
 render() {
    let { configData, isDefault, isLoading } = this.state;
    const pageInfo = { ...this.pageInfoValue, ...this._pageInfo }
    return (
        <MyContext.Provider value={pageInfo}>
            <View
                className={style.bg}
            > 
                {//动态渲染模板组件
                    configData &&
                    configData.map((item, key) => {
                        return this.renderComponent(item, key);
                    })
                }
            </View>
            {isLoading && <Loading></Loading>}
        </MyContext.Provider>
    );
}

 //渲染组件 注入下发配置事件和属性
 renderComponent(item, key) {
    const AsyncComponent = BussinesComponent[item.templateName];
    if (AsyncComponent) {
        return (
            <AsyncComponent
                key={key}
                dataSource={item.data}
                {...item.config}
                pageEvent={pageEvent}
            ></AsyncComponent>
        );
    } else {
        return null;
    }
}

4.逻辑层：包括业务处理逻辑，请求、异常、状态、性能、公共工具类，以及与基础库对接的适配能力。

5.基础库: 提供基本能力，定位、登录、请求、埋点等基础功能，主要是抹平各端基础功能的差异。

2、基础库

1.统一接口，分端实现，差异内部抹平

关于基础库我们采用分端实现的方式，即统一接口的多端文件。

基础库如何对接在项目里，修改 config/index.js，结合 taro 提供的 MultiPlatformPlugin 插件编译。


const baseLib = '@dj-lib/login' 
//增加别名，便于后续基础库调整切换
alias: {
  '@djmp': path.resolve(__dirname, "..", `./node_modules/${baseLib}/build`),
},
//修改webpack配置，h5和mini都要修改
webpackChain(chain, webpack) {
    chain.resolve.plugin('MultiPlatformPlugin')
      .tap(args => {
        args[2]["include"] = [`${baseLib}`]
        return args
      })
  }

业务里使用方式

import { goToLogin } from '@djmp/login/index';

goToLogin()

2.高复用

基础库不应该耦合框架，那么基础库应该如何设计，使其既能满足 taro 项目又能满足原生项目使用呢？

npm 基础库在 taro 经过编译后生成为 vendors 文件

npm 基础库在小程序原生项目 npm 构建后生成 miniprogram_npm

一样的基础库经过编译后会存在 2 种形态，多占了一份空间呢。

我们对小程序包体积大小是比较敏感的，为了节约空间，那么如何让 taro 使用小程序的 miniprogram_npm 呢？

先简单说一下思路，更改 webpack 的配置项，通过 externals 配置处理公共方法和公共模块的引入，保留这些引入的语句，并将引入方式设置成 commonjs 相对路径的方式，详细代码如下所示。

const config = {
  // ...
  mini: {
    // ...
    webpackChain (chain) {
      chain.merge({
        externals: [
          (context, request, callback) => {
            const externalDirs = ['@djmp/login']
            const externalDir = externalDirs.find(dir => request.startsWith(dir))

            if (process.env.NODE_ENV === 'production' && externalDir) {
              const res = request.replace(externalDir, `../../../../${externalDir.substr(1)}`)
              return callback(null, `commonjs ${res}`)
            }
            callback()
          },
        ],
      })
    }
    // ...
  }
  // ...
}

3、组件库

想要实现跨端组件，难点有三个

第一：如何在多个技术栈中找到最恰当的磨平方案，不同的方案会导致开发适配的成本不同，而人效提升才是我们最终想要实现的目的；

第二：如何在一码多端实现组件之后，确保没有对各个组件的性能产生影响

第三：如何在各项目中进行跨端组件的使用

基于以上，在我们已经确定的以 Taro 为基础开发框架的前提下，我们进行了整体跨端组件方案实现的规划设计：

在组件层面，划分为三层：UI 基础组件和业务组件为最底层；容器组件是中间层，最上层是业务模板组件；我们首先从 UI 基础组件与业务组件入手，进行方案的最终确认；

调研过程中，UI 组件和业务组件主要从 API、样式、逻辑三个方面去调研跨端的复用率：

经过以上调研得出结论：API 层面仍需要使用各自技术栈进行实践，通过属性一致的方式进行 API 层面的磨平；样式上，基础都使用 Sass 语法，通过 babel 工具在转化过程中生成各端可识别的样式形式；逻辑上基本是平移，不需要做改动；所以当我们想做跨端组件时，我们最大工作量在于：API 的磨平和样式的跨端写法的探索；

例：图片组件的磨平：

基于以上，跨端组件的复用方案经过调研是可行的，但是接下来，我们该如何保证转化后的组件能够和原生组件的性能媲美呢？我们的跨端组件又该如何在各个项目中使用呢？

在这个过程中，我们主要调研对比两种方案：

第一：直接利用 Taro 提供的跨端编辑功能进行转换，转换编译成 RN . 微信小程序以及 H5；

第二：通过 babel 进行编译，直接转换成 RN 原生代码，微信小程序原生代码，以及 H5 原生代码

对比方向	原码大小	编译成本	生成的组件性能
Taro 直接编译	大（携带了 Taro 环境）	中（Taro 直接提供，但需要各端调试）	与原生相同
通过 babel 转义	小（只有当前组件的源码代码）	中（需要开发 Babel 转义组件）	与原生相同

经过以上几组对比，我们最终选用了 babel 转义的方式。在项目中使用时，发布到 Npm 服务器上，供各个项目进行使用。

方案落地与未来规划：

在确认整体的方案方向之后，我们进行了项目的落地，首先搭建了跨端组件库的运行项目：能够支持预览京东小程序、微信小程序以及 H5 的组件生成的页面；以下是整个组件从生成到发布到对应项目的全部流程。

目前已经完成了个 5 种 UI 组件的实现，4 种业务组件；其中优惠券模块已经落地在到家小程序项目中，并已经沉淀了跨端组件的设计规则和方案。未来一年中，会继续跨端组件的实现与落地，从 UI、业务层到复杂容器以及复杂页面中。

4、工程化构建

1.构建微信小程序

因为存在多个 taro 项目由不同业务负责，需要将 taro 聚合编译后的产物，和微信原生聚合在一起，才能构成完整的小程序项目。

下面是设计的构建流程。

为了使其自动化,减少人工操作，在迪迦发布后台（ 到家自研的小程序发布后台）创建依赖任务即可，完成整体构建并上传。

其中执行【依赖任务】这个环节会进行，taro 项目聚合编译，并将产物合并到原生项目。

迪迦发布后台

2.构建京东小程序

yarn deploy:jd 版本号描述

//集成CI上传工具 jd-miniprogram-ci
const { upload, preview } = require('jd-miniprogram-ci')
const path = require('path')
const privateKey = 'xxxxx'
//要上传的目录-正式
const projectPath = path.resolve(__dirname, '../../', `dist/jddist`)
//要上传的目录-本地调试
const projectPathDev = path.resolve(__dirname, '../../', `dist/jddevdist`)
const version = process.argv[2] 
const desc = process.argv[3]
//预览版
preview({
    privateKey: privateKey,
    projectPath: projectPathDev,
    base64: false,
})
//体验版
upload({
    privateKey: privateKey,
    projectPath: projectPath,
    uv: version,
    desc: desc,
    base64: false,
})

3.构建发布 h5

yarn deploy:h5

h5 的应用通常采用 cdn 资源 +html 入口这种模式。先发布 cdn 资源进行预热，在发布 html 入口进行上线。

主要进行 3 个操作

1.编译出 h5dist 产物，即 html+ 静态资源

2.静态资源，利用集成 @jd/upload-oss-tools 工具上传到 cdn。

3.触发【行云部署编排】发布 html 文件入口

关于 cdn: 我们集成了 cdn 上传工具，辅助快速上线。


//集成 @jd/upload-oss-tools上传工具
const UploadOssPlugin = require("@jd/upload-oss-tools");
const accessKey = new Buffer.from('xxx', 'base64').toString()
const secretKey = new Buffer.from('xxx', 'base64').toString()

module.exports = function (localFullPath, folder) {
  return new Promise((resolve) => {
    console.log('localFullPath', localFullPath)
    console.log('folder', folder)
    // 初始化上传应用
    let _ploadOssPlugin = new UploadOssPlugin({
      localFullPath: localFullPath, // 被上传的本地绝对路径，自行配置
      access: accessKey, // http://oss.jd.com/user/glist 生成的 access key
      secret: secretKey, // http://oss.jd.com/user/glist 生成的 secret key
      site: "storage.jd.local", 
      cover: true, // 是否覆盖远程空间文件 默认true
      printCdnFile: true, // 是否手动刷新cdn文件 默认false
      bucket: "wxconfig", // 空间名字 仅能由小写字母、数字、点号(.)、中划线(-)组成
      folder: folder, // 空间文件夹名称 非必填（1、默认创建当前文件所在的文件夹，2、屏蔽字段或传undefined则按照localFullPath的路径一层层创建文件夹）
      ignoreRegexp: "", // 排除的文件规则,直接写正则不加双引号，无规则时空字符串。正则字符串，匹配到的文件和文件夹都会忽略
      timeout: "", // 上传请求超时的毫秒数 单位毫秒，默认30秒
      uploadStart: function (files) { }, // 文件开始上传回调函数，返回文件列表参数
      uploadProgress: function (progress) { }, // 文件上传过程回调函数，返回文件上传进度
      uploadEnd:  (res) =>{
        console.log('上传完成')
        resolve()
      },
      // 文件上传完毕回调函数，返回 {上传文件数组、上传文件的总数，成功数量，失败数量，未上传数量
    });
    _ploadOssPlugin.upload();
  })
}

三、性能优化

性能优化是一个亘古不变的话题，总结来说优化方向：包下载阶段、js 注入阶段、请求阶段、渲染阶段。

以下主要介绍在下载阶段如何优化包体积，请求阶段如何提高请求效率。

（一）体积优化

相信使用过 taro3 的同学，都有个同样的体会，就是编译出来的产物过大，主包可能超 2M！

1.主包是否开启

优化主包的体积大小：optimizeMainPackage。

像下面这样简单配置之后，可以避免主包没有引入的 module 不被提取到commonChunks中，该功能会在打包时分析 module 和 chunk 的依赖关系，筛选出主包没有引用到的 module 把它提取到分包内。

  module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
    },
  },
}

2.使用压缩插件 terser-webpack-plugin

//使用压缩插件
   webpackChain(chain, webpack) {
     chain.merge({
       plugin: {
         install: {
           plugin: require('terser-webpack-plugin'),
           args: [{
             terserOptions: {
               compress: true, // 默认使用terser压缩
               keep_classnames: true, // 不改变class名称
               keep_fnames: true // 不改变函数名称
             }
           }]
         }
       }
     })
   }

3.把公共文件提取到分包。

mini.addChunkPages：为某些页面单独指定需要引用的公共文件。

例如在使用小程序分包的时候，为了减少主包大小，分包的页面希望引入自己的公共文件，而不希望直接放在主包内。那么我们首先可以通过 webpackChain 配置来单独抽离分包的公共文件，然后通过 mini.addChunkPages 为分包页面配置引入分包的公共文件，其使用方式如下：

mini.addChunkPages 配置为一个函数，接受两个参数

•pages 参数为 Map 类型，用于为页面添加公共文件

•pagesNames 参数为当前应用的所有页面标识列表，可以通过打印的方式进行查看页面的标识

例如，为 pages/index/index 页面添加 eating 和 morning 两个抽离的公共文件：


mini: {
    // ...
    addChunkPages(pages: Map<string, string[]>, pagesNames: string[]) {
      pages.set('pages/index/index', ['eating', 'morning'])
    },
  },

4.代码分析

如果以上方式，还达不到我们想要的效果，那么我们只能静下心来分析下 taro 的打包逻辑。