关于前端:小程序分包的一些思考及Uiniapp-分包优化逻辑的验证

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

分包

什么是分包

分包指的是把一个残缺的小程序我的项目，依照需要划分为不同的子包，在构建时打包成不同的分包，用户在应用时按需进行加载。

分包的益处

对小程序进行分包的益处次要有以下两点：

能够优化小程序首次启动的下载工夫
在多团队共同开发时能够更好的解耦合作

uniapp 分包配置

按官网，假如反对分包的 uni-app 目录构造如下：

┌─pages               │  ├─index│  │  └─index.vue    │  └─login│     └─login.vue    ├─pagesA   │  ├─static│  └─list│     └─list.vue ├─pagesB    │  ├─static│  └─detail│     └─detail.vue  ├─static             ├─main.js       ├─App.vue          ├─manifest.json  └─pages.json

则须要在 pages.json 中填写:

{    "pages": [{        "path": "pages/index/index",        "style": { ...}    }, {        "path": "pages/login/login",        "style": { ...}    }],    "subPackages": [{        "root": "pagesA",        "name": "分包的别名"        "pages": [{            "path": "list/list",            "style": { ...}        }]    }, {        "root": "pagesB",        "pages": [{            "path": "detail/detail",            "style": { ...}        }]    }],}

入手实际：https://github.com/qq44924588...

运行后，能够在开发者详情里查看分包信息：

这样配置的目录构造真的好？

按官网的事例，如果咱们要分两个包，则对在 pages 同级下建设两个目录 pagesA、 pagesB，这样划分真的好吗？假如咱们有一个流动的业务模板，对应的流动详情地址是 /pages/activity/detail。pages.json 配置如下：

    "pages": [        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "首页"            }        },        {            "path": "pages/activity/detail",            "style": {                "navigationBarTitleText": "流动详情"            }        }    ],

随着业务的倒退，该模块的性能也越来越多。哪天，咱们要对该包进行分包的时候，如果依照后面的分包形式，咱们如果在 pages 同级下建设一个子包的目录，假如咱们这里叫 pagesA，而后把对应的流动模块的文件都移动到该目录下，对应的 pages.json配置如下：

"subPackages": [{  "root": "pagesA",  "pages": [{    "path": "activity/detail"   }]}]

此时，对应的流动详情地址是 /pagesA/activity/detail，这样就会引发一个问题，此时流动详情门路曾经变动了，所以分包要能失常工作，之前的门路都要改过来，如果有其它小程序有跳到该详情页面也得改，显然这种分包构造是很不靠谱的，为了一个分包得改多个文件，甚至多个小程序。

那要怎么解决这个问题了？显然，只有门路不变动，但能正确分包不就能够解决这个问题了。

在细想一下分包，无非就是在 subPackages 中指定一个分包名，分包页面对应该分包名下的文件。所以，咱们能够指定原有 pages 下的模块作为一个子分包，这样配置就能够解决分包后门路不统一的问题，改写后的构造如下：

  "subPackages": [    {      "root": "pages/activity",      "pages": [        {          "path": "detail"        }      ]    }  ],

事例地址：https://github.com/qq44924588...

分包预加载

分包预载配置。配置 preloadRule 后，在进入小程序某个页面时，由框架主动预下载可能须要的分包，晋升进入后续分包页面时的启动速度。

假如，咱们两个分包 pagesA 和 pagesB ，当咱们进入详情页面，想事后加 pagesA ，对应的配置如下：

{    "pages": [ //pages数组中第一项示意利用启动页，参考：https://uniapp.dcloud.io/collocation/pages        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "首页"            }        },        {            "path": "pages/detail/index",            "style": {                "navigationBarTitleText": "详情"            }        }    ],    "subPackages": [{        "root": "pagesA",        "pages": [{            "path": "detail/index"        }]    }, {        "root": "pagesB",        "pages": [{            "path": "detail/index"        }]    }],    "preloadRule": {        "pages/detail/index": {            "network": "wifi",            "packages": ["pagesA", "pagesB"]        }    }}

preloadRule 中，key 是页面门路，value 是进入此页面的预下载配置, packages 是进入页面后预下载分包的。network 在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）。

事例地址：

https://github.com/qq44924588...

分包的加载规定

分包须要留神一点是：tabBar 页面须要放在主包中，假如咱们如两个 tabBar，配置如下：

{    "pages": [        {      "path": "pages/channel/index",      "style": {        "disableScroll": true      }    },    {      "path": "pages/member/index",      "style": {        "disableScroll": true        }      }    ],    "tabBar": {    "color": "#BBBBBD",    "selectedColor": "#1C1C1C",    "borderStyle": "white",    "backgroundColor": "#ffffff",    "list": [      {        "pagePath": "pages/channel/index",        "iconPath": "static/tabbar_icon_channel.png",        "selectedIconPath": "static/tabbar_icon_channel_active.png",        "text": "会员专属"      },      {        "pagePath": "pages/member/index",        "iconPath": "static/tabbar_icon_member.png",        "selectedIconPath": "static/tabbar_icon_member_active.png",        "text": "掌通会员"      }    ]  }}

如果咱们把 tabBar 页面配置到 subPackages，则会出错：

事例地址：https://github.com/qq44924588...

分包优化

在对应平台的配置下增加"optimization":{"subPackages":true}开启分包优化。

分包优化具体逻辑

动态文件：分包下反对 static 等动态资源拷贝，即分包目录内搁置的动态资源不会被打包到主包中，也不可在主包中应用
js文件：当某个 js 仅被一个分包援用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包援用，或被超过 1 个分包援用）
自定义组件：若某个自定义组件仅被一个分包援用时，且未放入到分包内，编译时会输入提示信息

首先，咱们来化验一下第一条规定，首页建设对应的配置:

{    "pages": [        {            "path": "pages/index/index",        }    ],    "subPackages": [{        "root": "pagesA",        "pages": [{            "path": "detail/index"        }]    }],}

这里，咱们有一个分包 pagesA 对应一个详情页面，详情页面应用一张图片，该图片搁置以后包下 static 文件下，内容如下：

  <view class="content">    <image class="logo" src="../static/test.png" />  </view>

而后，咱们开始打包，而后点击开发者工具的详情，点击 本地代码-> 依赖剖析，就能够查看打包的详细信息，如下图所示：

能够看到，咱们点击主包下的 static 是没有咱们的在分包中用的 test.png 图片，相同，它被打包本人的分包上面。即分包目录内搁置的动态资源不会被打包到主包中，成立。

接下来，在来验证一下，如果在主包中应用分包的 test.png 图片会怎么样？改写一上咱们主包的 index 文件的内容：

<view class="content">  <image class="logo" src="../../pagesA/static/test.png" /></view>

运行后，控制台会给出谬误：

所以，分包下反对 static 等动态资源拷贝，即分包目录内搁置的动态资源不会被打包到主包中，也不可在主包中应用 成立。

事例地址：https://github.com/qq44924588...

而后，咱们来验证一下第二条规定：js文件：当某个 js 仅被一个分包援用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包援用，或被超过 1 个分包援用）。

首先，咱们在主包中的 src/utils中建设一个 common.ts,内容如下：

export const add = (a: number, b:number) => {  return a + b}

而后，咱们在子包 pagesA 中导入应用：

<script lang="ts">import Vue from 'vue'import { add } from '@/utils/common'export default Vue.extend({  created() {    console.log(add(1, 2))  }})</script>

同样，打包，而后点击开发者工具的详情，点击 本地代码-> 依赖剖析：

从上图能够看到，咱们在主包中的的 vender.js 没有找到 src/utils/common.ts 中的 add 办法，但在分包 pagesA 找到了。

那如果某个 js被多个分包所援用呢？

咱们再建设一个分包 pagesB，与同样的形式在子包 pagesB 中导入common.ts：

<script lang="ts">import Vue from 'vue'import { add } from '@/utils/common'export default Vue.extend({  created() {    console.log(add(1, 2))  }})</script>

同样，打包，而后点击开发者工具的详情，点击 本地代码-> 依赖剖析：

从图能够看到，咱们在主包中的 vendor.js 能够找到咱们应用的 add 办法，在分包中没有找到对应的 vendor.js，所以当某个 js 仅被多个分包援用时，该 js 会被打包到主包。

事例地址：https://github.com/qq44924588...

最初，咱们来验证一下第三条规定：自定义组件：若某个自定义组件仅被一个分包援用时，且未放入到分包内，编译时会输入提示信息

首先，咱们在主包中的 src/components 建设一个自定义组件 SayHello，内容如下：

<template>    <view class="content">    Hello World    </view></template>

而后，以同样的形式建个分包(步骤跟下面的例子一样)，在分包的中援用咱们的组件 SayHello：

<template>  <view class="content">    <SayHello />  </view></template><script lang="ts">import Vue from 'vue'import SayHello from '@/components/SayHello.vue'export default Vue.extend({  components: {    SayHello  }})</script>

而后，编译能够在控制台看到提醒的信息：

那如果自定义组件被多个分包援用呢？提醒应该会隐没，为了严谨性，咱们再建个分包 pagesB 以同样姿态援用组件，而后编译，再查看控制台：

能够看到，提示信息隐没了。

至此，UniApp 官网提到分包优化具体逻辑咱们都验证过，Nice。

事例地址：https://github.com/qq44924588...

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。