一、前言

京東到家小程序最初只有微信小程序，隨著業(yè)務(wù)的發(fā)展，同樣的功能需要支持容器越來(lái)越多，包括支付寶小程序、京東小程序、到家APP、京東APP等，然而每個(gè)端分開(kāi)實(shí)現(xiàn)要面臨研發(fā)成本高、不一致等問(wèn)題。

為了提高研發(fā)效率，經(jīng)過(guò)技術(shù)選型采用了taro3+原生混合開(kāi)發(fā)模式，本文主要講解我們是如何基于taro框架，進(jìn)行多端能力的探索和性能優(yōu)化。

二、多端能力的探索

1.到家小程序基于taro3的架構(gòu)流程圖

?框架分層解釋

1.配置層：主要包含編譯配置、路由配置、分包加載、拓展口子。

(資料圖片)

2.視圖層：主要完成App生命周期初始化、頁(yè)面初始化、注入宿主事件、解析配置為頁(yè)面和組件綁定事件和屬性。

3.組件庫(kù)：是一個(gè)單獨(dú)維護(hù)的項(xiàng)目，多端組件庫(kù)包括業(yè)務(wù)組件和原子組件，可由視圖層根據(jù)配置動(dòng)態(tài)加載組件。

//渲染主入口     render() {        let { configData, isDefault, isLoading } = this.state;        const pageInfo = { ...this.pageInfoValue, ...this._pageInfo }        return (            <MyContext.Provider value={pageInfo}>                <View                    className={style.bg}                >                     {//動(dòng)態(tài)渲染模板組件                        configData &&                        configData.map((item, key) => {                            return this.renderComponent(item, key);                        })                    }                </View>                {isLoading && <Loading></Loading>}            </MyContext.Provider>        );    }     //渲染組件 注入下發(fā)配置事件和屬性     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.邏輯層：包括業(yè)務(wù)處理邏輯，請(qǐng)求、異常、狀態(tài)、性能、公共工具類(lèi)，以及與基礎(chǔ)庫(kù)對(duì)接的適配能力。

5.基礎(chǔ)庫(kù): 提供基本能力，定位、登錄、請(qǐng)求、埋點(diǎn)等基礎(chǔ)功能，主要是抹平各端基礎(chǔ)功能的差異。

2、基礎(chǔ)庫(kù)

1.統(tǒng)一接口，分端實(shí)現(xiàn)，差異內(nèi)部抹平

關(guān)于基礎(chǔ)庫(kù)我們采用分端實(shí)現(xiàn)的方式，即統(tǒng)一接口的多端文件。

??基礎(chǔ)庫(kù)如何對(duì)接在項(xiàng)目里，修改config/index.js，結(jié)合taro提供的MultiPlatformPlugin插件編譯。

const baseLib = "@dj-lib/login"   //增加別名，便于后續(xù)基礎(chǔ)庫(kù)調(diào)整切換  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        })    }

業(yè)務(wù)里使用方式

import { goToLogin } from "@djmp/login/index";goToLogin()

2.高復(fù)用

基礎(chǔ)庫(kù)不應(yīng)該耦合框架，那么基礎(chǔ)庫(kù)應(yīng)該如何設(shè)計(jì)，使其既能滿(mǎn)足taro項(xiàng)目又能滿(mǎn)足原生項(xiàng)目使用呢？

npm基礎(chǔ)庫(kù) 在taro經(jīng)過(guò)編譯后生成為 vendors文件

npm基礎(chǔ)庫(kù) 在小程序原生項(xiàng)目npm構(gòu)建后 生成miniprogram_npm

??
一樣的基礎(chǔ)庫(kù)經(jīng)過(guò)編譯后會(huì)存在2種形態(tài)，多占了一份空間呢。

我們對(duì)小程序包體積大小是比較敏感的，為了節(jié)約空間，那么如何讓taro使用小程序的miniprogram_npm呢？

先簡(jiǎn)單說(shuō)一下思路，更改 webpack 的配置項(xiàng)，通過(guò)externals 配置處理公共方法和公共模塊的引入，保留這些引入的語(yǔ)句，并將引入方式設(shè)置成 commonjs 相對(duì)路徑的方式，詳細(xì)代碼如下所示。

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、組件庫(kù)

想要實(shí)現(xiàn)跨端組件，難點(diǎn)有三個(gè)

第一：如何在多個(gè)技術(shù)棧中找到最恰當(dāng)?shù)哪テ椒桨福煌姆桨笗?huì)導(dǎo)致 開(kāi)發(fā)適配的成本不同，而人效提升才是我們最終想要實(shí)現(xiàn)的目的；

第二：如何在一碼多端實(shí)現(xiàn)組件之后，確保沒(méi)有對(duì)各個(gè)組件的性能產(chǎn)生影響

第三：如何在各項(xiàng)目中進(jìn)行跨端組件的使用

基于以上，在我們已經(jīng)確定的以Taro為基礎(chǔ)開(kāi)發(fā)框架的前提下，我們進(jìn)行了整體跨端組件方案實(shí)現(xiàn)的規(guī)劃設(shè)計(jì)：

??在組件層面，劃分為三層：UI基礎(chǔ)組件和業(yè)務(wù)組件 為最底層；容器組件是中間層，最上層是業(yè)務(wù)模板組件；我們首先從UI基礎(chǔ)組件與業(yè)務(wù)組件入手，進(jìn)行方案的最終確認(rèn)；

調(diào)研過(guò)程中，UI組件和業(yè)務(wù)組件主要從API、樣式、邏輯三個(gè)方面去調(diào)研跨端的復(fù)用率：

??經(jīng)過(guò)以上調(diào)研得出結(jié)論：API層面仍需要使用各自技術(shù)棧進(jìn)行實(shí)踐，通過(guò)屬性一致的方式進(jìn)行API層面的磨平；樣式上，基礎(chǔ)都使用Sass語(yǔ)法，通過(guò)babel工具在轉(zhuǎn)化過(guò)程中生成各端可識(shí)別的樣式形式；邏輯上基本是平移，不需要做改動(dòng)；所以當(dāng)我們想做跨端組件時(shí)，我們最大工作量在于：API的磨平和樣式的跨端寫(xiě)法的探索；

例：圖片組件的磨平：

??
基于以上，跨端組件的復(fù)用方案經(jīng)過(guò)調(diào)研是可行的，但是接下來(lái)，我們?cè)撊绾伪ＷC轉(zhuǎn)化后的組件能夠和原生組件的性能媲美呢？我們的跨端組件又該如何在各個(gè)項(xiàng)目中使用呢？

在這個(gè)過(guò)程中，我們主要調(diào)研對(duì)比兩種方案：

第一：直接利用Taro提供的跨端編輯功能進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換編譯成RN . 微信小程序 以及H5；

第二：通過(guò)babel進(jìn)行編譯，直接轉(zhuǎn)換成RN原生代碼，微信小程序原生代碼，以及H5原生代碼

經(jīng)過(guò)以上幾組對(duì)比，我們最終選用了babel轉(zhuǎn)義的方式。在項(xiàng)目中使用時(shí)，發(fā)布到Npm服務(wù)器上，供各個(gè)項(xiàng)目進(jìn)行使用。

方案落地與未來(lái)規(guī)劃：

在確認(rèn)整體的方案方向之后，我們進(jìn)行了項(xiàng)目的落地，首先搭建了跨端組件庫(kù)的運(yùn)行項(xiàng)目：能夠支持預(yù)覽京東小程序、微信小程序以及H5的組件生成的頁(yè)面；以下是整個(gè)組件從生成到發(fā)布到對(duì)應(yīng)項(xiàng)目的全部流程。

??目前已經(jīng)完成了個(gè)5種UI組件的實(shí)現(xiàn)，4種業(yè)務(wù)組件；其中優(yōu)惠券模塊已經(jīng)落地在到家小程序項(xiàng)目中，并已經(jīng)沉淀了跨端組件的設(shè)計(jì)規(guī)則和方案。未來(lái)一年中，會(huì)繼續(xù)跨端組件的實(shí)現(xiàn)與落地，從UI、業(yè)務(wù)層到復(fù)雜容器以及復(fù)雜頁(yè)面中。

4、工程化構(gòu)建

1.構(gòu)建微信小程序

因?yàn)榇嬖诙鄠€(gè)taro項(xiàng)目由不同業(yè)務(wù)負(fù)責(zé)，需要將taro聚合編譯后的產(chǎn)物，和微信原生聚合在一起，才能構(gòu)成完整的小程序項(xiàng)目。

下面是設(shè)計(jì)的構(gòu)建流程。

??
為了使其自動(dòng)化,減少人工操作，在迪迦發(fā)布后臺(tái)（到家自研的小程序發(fā)布后臺(tái)）創(chuàng)建依賴(lài)任務(wù)即可，完成整體構(gòu)建并上傳。

??
其中執(zhí)行【依賴(lài)任務(wù)】這個(gè)環(huán)節(jié)會(huì)進(jìn)行，taro項(xiàng)目聚合編譯，并將產(chǎn)物合并到原生項(xiàng)目。

??迪迦發(fā)布后臺(tái)

2.構(gòu)建京東小程序

yarn deploy:jd 版本號(hào) 描述

//集成CI上傳工具 jd-miniprogram-ciconst { upload, preview } = require("jd-miniprogram-ci")const path = require("path")const privateKey = "xxxxx"http://要上傳的目錄-正式const projectPath = path.resolve(__dirname, "../../", `dist/jddist`)//要上傳的目錄-本地調(diào)試const projectPathDev = path.resolve(__dirname, "../../", `dist/jddevdist`)const version = process.argv[2] const desc = process.argv[3]//預(yù)覽版preview({    privateKey: privateKey,    projectPath: projectPathDev,    base64: false,})//體驗(yàn)版upload({    privateKey: privateKey,    projectPath: projectPath,    uv: version,    desc: desc,    base64: false,})

3.構(gòu)建發(fā)布h5

yarn deploy:h5

h5的應(yīng)用通常采用 cdn資源 +html入口 這種模式。先發(fā)布cdn資源進(jìn)行預(yù)熱，在發(fā)布html入口進(jìn)行上線(xiàn)。

主要進(jìn)行3個(gè)操作

1.編譯出h5dist產(chǎn)物，即html+靜態(tài)資源

2.靜態(tài)資源，利用集成 @jd/upload-oss-tools 工具上傳到 cdn。

3.觸發(fā)【行云部署編排】發(fā)布html文件入口

關(guān)于cdn: 我們集成了cdn上傳工具，輔助快速上線(xiàn)。

//集成 @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)    // 初始化上傳應(yīng)用    let _ploadOssPlugin = new UploadOssPlugin({      localFullPath: localFullPath, // 被上傳的本地絕對(duì)路徑，自行配置      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, // 是否覆蓋遠(yuǎn)程空間文件 默認(rèn)true      printCdnFile: true, // 是否手動(dòng)刷新cdn文件 默認(rèn)false      bucket: "wxconfig", // 空間名字 僅能由小寫(xiě)字母、數(shù)字、點(diǎn)號(hào)(.)、中劃線(xiàn)(-)組成      folder: folder, // 空間文件夾名稱(chēng) 非必填（1、默認(rèn)創(chuàng)建當(dāng)前文件所在的文件夾，2、屏蔽字段或傳undefined則按照l(shuí)ocalFullPath的路徑一層層創(chuàng)建文件夾）      ignoreRegexp: "", // 排除的文件規(guī)則,直接寫(xiě)正則不加雙引號(hào)，無(wú)規(guī)則時(shí)空字符串。正則字符串，匹配到的文件和文件夾都會(huì)忽略      timeout: "", // 上傳請(qǐng)求超時(shí)的毫秒數(shù) 單位毫秒，默認(rèn)30秒      uploadStart: function (files) { }, // 文件開(kāi)始上傳回調(diào)函數(shù)，返回文件列表參數(shù)      uploadProgress: function (progress) { }, // 文件上傳過(guò)程回調(diào)函數(shù)，返回文件上傳進(jìn)度      uploadEnd:  (res) =>{        console.log("上傳完成")        resolve()      },      // 文件上傳完畢回調(diào)函數(shù)，返回 {上傳文件數(shù)組、上傳文件的總數(shù)，成功數(shù)量，失敗數(shù)量，未上傳數(shù)量    });    _ploadOssPlugin.upload();  })}

三、性能優(yōu)化

性能優(yōu)化是一個(gè)亙古不變的話(huà)題，總結(jié)來(lái)說(shuō)優(yōu)化方向：包下載階段、js注入階段、請(qǐng)求階段、渲染階段。

以下主要介紹在下載階段如何優(yōu)化包體積，請(qǐng)求階段如何提高請(qǐng)求效率。

（一）體積優(yōu)化

相信使用過(guò)taro3的同學(xué)，都有個(gè)同樣的體會(huì)，就是編譯出來(lái)的產(chǎn)物過(guò)大，主包可能超2M！

1.主包是否開(kāi)啟

優(yōu)化主包的體積大小 ：optimizeMainPackage。

像下面這樣簡(jiǎn)單配置之后，可以避免主包沒(méi)有引入的 module 不被提取到commonChunks中，該功能會(huì)在打包時(shí)分析 module 和 chunk 的依賴(lài)關(guān)系，篩選出主包沒(méi)有引用到的 module 把它提取到分包內(nèi)。

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, // 默認(rèn)使用terser壓縮                keep_classnames: true, // 不改變class名稱(chēng)                keep_fnames: true // 不改變函數(shù)名稱(chēng)              }            }]          }        }      })    }

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

mini.addChunkPages：為某些頁(yè)面單獨(dú)指定需要引用的公共文件。

例如在使用小程序分包的時(shí)候，為了減少主包大小，分包的頁(yè)面希望引入自己的公共文件，而不希望直接放在主包內(nèi)。那么我們首先可以通過(guò) webpackChain 配置 來(lái)單獨(dú)抽離分包的公共文件，然后通過(guò) mini.addChunkPages 為分包頁(yè)面配置引入分包的公共文件，其使用方式如下：

mini.addChunkPages 配置為一個(gè)函數(shù)，接受兩個(gè)參數(shù)

?pages 參數(shù)為 Map 類(lèi)型，用于為頁(yè)面添加公共文件

?pagesNames 參數(shù)為當(dāng)前應(yīng)用的所有頁(yè)面標(biāo)識(shí)列表，可以通過(guò)打印的方式進(jìn)行查看頁(yè)面的標(biāo)識(shí)

例如，為 pages/index/index 頁(yè)面添加 eating 和 morning 兩個(gè)抽離的公共文件：

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

4.代碼分析

如果以上方式，還達(dá)不到我們想要的效果，那么我們只能靜下心來(lái)分析下taro的打包邏輯。

??可以執(zhí)行 npm run dev 模式查看產(chǎn)物里的 xxx.LICENSE.txt文件，里面羅列打包了哪些文件，需要自行分析去除冗余。

以下以vendors.LICENSE.txt 為例

???runtime.js: webpack 運(yùn)行時(shí)入口 ,只有2k，沒(méi)有優(yōu)化空間。

?taro.js: node_modules 中 Taro 相關(guān)依賴(lài)，112k，可以魔改源碼，否則沒(méi)有優(yōu)化空間。

?vendors.js: node_modules 除 Taro 外的公共依賴(lài)，查看vendors.js.LICENSE.txt文件分析包括哪些文件

?common.js: 項(xiàng)目中業(yè)務(wù)代碼公共邏輯，查看common.js.LICENSE.txt文件分析包括哪些文件

?app.js app生命周期中依賴(lài)的文件。查看app.js.LICENSE.txt文件分析包括哪些文件

?app.wxss 公共樣式文件 ，看業(yè)務(wù)需求優(yōu)化，去除非必要的全局樣式。

?base.wxml 取決于使用組件的方式，可優(yōu)化空間較小。

（二）網(wǎng)絡(luò)請(qǐng)求優(yōu)化：

相信大家的業(yè)務(wù)里有多種類(lèi)型的請(qǐng)求，業(yè)務(wù)類(lèi)、埋點(diǎn)類(lèi)、行為分析、監(jiān)控、其他sdk封裝的請(qǐng)求。然而在不同的宿主環(huán)境有不同的并發(fā)限制，比如，微信小程序請(qǐng)求并發(fā)限制 10個(gè)，京東等小程序限制為5個(gè)。

如下圖，以微信小程序?yàn)槔谡?qǐng)求過(guò)多時(shí)，業(yè)務(wù)與埋點(diǎn)類(lèi)的請(qǐng)求爭(zhēng)搶請(qǐng)求資源，造成業(yè)務(wù)請(qǐng)求排隊(duì)，導(dǎo)致頁(yè)面展示滯后，弱網(wǎng)情況甚至造成卡頓。

??那么基于以上問(wèn)題，如何平衡業(yè)務(wù)請(qǐng)求和非業(yè)務(wù)請(qǐng)求呢？

這里我們有2個(gè)方案：

1.動(dòng)態(tài)調(diào)度方案 https://www.cnblogs.com/rsapaper/p/15047813.html

思路就行將請(qǐng)求分為高優(yōu)和低優(yōu)請(qǐng)求，當(dāng)發(fā)生阻塞時(shí)，將高優(yōu)請(qǐng)求放入請(qǐng)求隊(duì)列，低優(yōu)進(jìn)入等待隊(duì)列。

??請(qǐng)求分發(fā)器 QueueRequest：對(duì)新的請(qǐng)求進(jìn)行分發(fā)。

?加入等待隊(duì)列：正在進(jìn)行的請(qǐng)求數(shù)超過(guò)設(shè)置的 threshold，且請(qǐng)求為低優(yōu)先級(jí)時(shí)；

?加入請(qǐng)求池：請(qǐng)求為高優(yōu)先級(jí)，或并發(fā)數(shù)未達(dá)到 threshold。

等待隊(duì)列 WaitingQueue：維護(hù)需要延時(shí)發(fā)送的請(qǐng)求等待隊(duì)列。在請(qǐng)求池空閑或請(qǐng)求超過(guò)最長(zhǎng)等待時(shí)間時(shí)，補(bǔ)發(fā)等待請(qǐng)求。

請(qǐng)求池 RequestPool：發(fā)送請(qǐng)求并維護(hù)所有正在進(jìn)行的請(qǐng)求的狀態(tài)。對(duì)外暴露正在進(jìn)行的請(qǐng)求數(shù)量，并在有請(qǐng)求完成時(shí)通知等待隊(duì)列嘗試補(bǔ)發(fā)。

2.虛擬請(qǐng)求池方案

該思路是將微信的10個(gè)請(qǐng)求資源，分成3個(gè)請(qǐng)求池，業(yè)務(wù)請(qǐng)求：埋點(diǎn)類(lèi)：其他請(qǐng)求的比例為6:2:2。比例可以自行調(diào)整。

這樣各類(lèi)型請(qǐng)求都在自己的請(qǐng)求池，不存在爭(zhēng)搶其他請(qǐng)求池資源，保障了業(yè)務(wù)不被其他請(qǐng)求阻塞。

??實(shí)現(xiàn)方式

??方案對(duì)比

2個(gè)方案都可以完成請(qǐng)求資源的分配，但結(jié)合業(yè)務(wù)實(shí)際采用的是虛擬請(qǐng)求方案，經(jīng)測(cè)試在弱網(wǎng)情況下，請(qǐng)求效率可以提升15%.?

四、總結(jié)和展望

未來(lái)一定是一碼多端的方向，所以我們未來(lái)在基礎(chǔ)建設(shè)上會(huì)投入更多的精力，包括框架層升級(jí)優(yōu)化、基礎(chǔ)庫(kù)建設(shè)、組件庫(kù)建設(shè)、工程化建設(shè)快速部署多端。

在性能優(yōu)化上我們還可以探索的方向有京東小程序分包預(yù)加載、分包異步化、京東容器flutter渲染、騰訊skyLine渲染引擎等。

在團(tuán)隊(duì)溝通協(xié)作上會(huì)與Taro團(tuán)隊(duì)、京東小程序容器團(tuán)隊(duì)、nut-ui、拼拼等團(tuán)隊(duì)進(jìn)行學(xué)習(xí)溝通, 也希望能與大家合作共建。

五、結(jié)束語(yǔ)

京東小程序開(kāi)放平臺(tái)是京東自研平臺(tái)，提供豐富的開(kāi)放能力和底層的引擎支持，目前有開(kāi)發(fā)者工具、轉(zhuǎn)化工具、可視化拖拽等多種開(kāi)發(fā)工具可供內(nèi)部研發(fā)同事使用，提升開(kāi)發(fā)質(zhì)量同時(shí)快速實(shí)現(xiàn)業(yè)務(wù)功能的上線(xiàn)。內(nèi)部已有京東支付、京東讀書(shū)、京東居家等業(yè)務(wù)使用京東小程序作為技術(shù)框架開(kāi)展其業(yè)務(wù)。

參考：

https://www.cnblogs.com/rsapaper/p/15047813.html

https://taro-docs.jd.com/docs/next/config-detail#minioptimizemainpackage

https://taro-docs.jd.com/docs/next/dynamic-import

https://zhuanlan.zhihu.com/p/396763942

關(guān)鍵詞