文稿小程序分包的一些思考及Uiniapp 分包优化逻辑的验证

Posted 2022-03-02 大迁世界

大家好，我是小智。

今天，带来我在团队的最近一次分享。

目录结构如下：

配置如下：
同级下建立一个子包的目录，假设我们这里叫 pagesA，然后把对应的活动模块的文件都挪动到该目录下，对应的 pages.json配置如下：
中指定一个分包名，分包页面对应该分包名下的文件。所以，我们可以指定原有 pages 下的模块作为一个子分包，这样配置就可以解决分包后路径不一致的问题，改写后的结构如下：
后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
假设，我们两个分包 pagesA 和 pagesB ，当我们进入详情页面，想预先加 pagesA ，对应的配置如下：
中，key 是页面路径，value 是进入此页面的预下载配置,  packages 是进入页面后预下载分包的 。network  在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）。
事例地址：
https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/03.%E5%88%86%E5%8C%85%E9%A2%84%E5%8A%A0%E8%BD%BD
页面需要放在主包中，假设我们如两个 tabBar，配置如下：
 对应一个详情页面，详情页面使用一张图片，该图片放置当前包下 static 文件下，内容如下：
下的 static 是没有我们的在分包中用的 test.png 图片，相反，它被打包自己的分包下面。即分包目录内放置的静态资源不会被打包到主包中，成立。
接下来，在来验证一下，如果在主包中使用分包的test.png 图片会怎么样？改写一上我们主包的 index 文件的内容：
成立。
事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/05.%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96__%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6
然后，我们来验证一下第二条规则：js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）。
首先，我们在主包中的 src/utils中建立一个 common.ts,内容如下：
中导入使用：
中的的 vender.js 没有找到 src/utils/common.ts 中的 add 方法，但在分包 pagesA 找到了。
那如果某个 js被多个分包所引用呢？
我们再建立一个分包 pagesB，与同样的方式在子包 pagesB 中导入common.ts：
可以找到我们使用的 add 方法，在分包中没有找到对应的 vendor.js，所以当某个 js 仅被多个分包引用时，该 js 会被打包到主包。
事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/05.%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96__JS%E6%96%87%E4%BB%B6
最后，我们来验证一下第三条规则：自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息
首先，我们在主包中的 src/components 建立一个自定义组件 SayHello，内容如下：
以同样姿势引用组件，然后编译，再查看控制台：
可以看到，提示信息消失了。
至此，UniApp 官网提到分包优化具体逻辑我们都验证过，Nice。
事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/0.5.%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96__%E7%BB%84%E4%BB%B6

微信小程序小结 -- 分包加载及小程序间跳转

分包加载

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载（主要是空间不够用，哈哈~）。

在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 8M

单个分包/主包大小不能超过 2M

使用如下：

{
  "pages":[         //主包
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [      //分包的集合
    {
      "root": "pages/task/",    //分包1：物理根目录
      "pages": [
        "index/index",          //pages/task/index/index
        "grade/grade"
      ]
    }, {                        //分包2
      "root": "pages/read/",
      "pages": [
        "index/index",
        "note/note",
        "comment/index"     //导航全路径：/pages/read/comment/index
      ]
    }
  ]
}

打包原则

声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包） 中。

app（主包）也可以有自己的 pages（即最外层的 pages 字段）。

subPackage 的根目录不能是另外一个 subPackage 内的子目录。

首页的 TAB 页面必须在 app（主包）内。

引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件。

packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template。

packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源。

注意：

• 不管分包如何处理，跳转路径和之前一样正常跳转，一点都没变；加载分包时会有弹窗提示。
• 如果分包的首页在TAB中，则文件必须不能放在分包的目录下；
• 尽管做了分包处理，项目的素材，公共文件等若放在最外层依然会被分在主包中。可将图片等放在分包的目录下。

参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

跳转到同个公众号下的另一个小程序

<navigator target="miniProgram" open-type="navigate"
    app-id="xxxxxxxx" path="/pages/homework/index/index"
    extra-data="" version="release">
        打开绑定的小程序
</navigator>

当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；

如果当前小程序是正式版，则打开的小程序必定是正式版。

UI效果：如打开一个新的小程序一样，有开始的加载效果；之后直接到指定页面（未指定时默认到首页），中间没有别的反应。

点击右上角的关闭按钮，只关闭当前小程序（即跳转到的），之后显示原来的小程序。