uniapp做小程序分包

背景:用uniapp开发小程序时会遇到文件夹资源过大(一般是2M以上)导致无法预览的问题,因此就需要配置分包规则;话不多说,直接上代码:
  1. 先在根目录下面建立几个需要做分包的文件夹,如:
    在这里插入图片描述

  2. 打开pages.json这个文件,一般情况会有四个主页面,如:

"pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/clue/clue",
      "style": {
        "navigationBarTitleText": "线索"
      }
    },
    {
      "path": "pages/manage/manage",
      "style": {
        "navigationBarTitleText": "管理"
      }
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  1. 在pages同级结构中建立名为subPackages的数组对象,例:
"subPackages": [
    {
      "root": "packageA",
      "name": "indexOthers",
      "pages": [
        {
          "path": "xxxx/xxxxxx",
          "style": {
            "navigationBarTitleText": "模板页面"
          }
        }
      ]
    },
    {
      "root": "packageB",
      "name": "clueOthers",
      "pages": [
        {
          "path": "xxxx/xxxxxx",
          "style": {
            "navigationBarTitleText": "模板页面"
          }
        }
      ]
    },
    {
      "root": "packageC",
      "name": "manageOthers",
      "pages": [
        {
          "path": "xxxx/xxxxxx",
          "style": {
            "navigationBarTitleText": "模板页面"
          }
        }
      ]
    },
    {
      "root": "packageD",
      "name": "myOthers",
      "pages": [
        {
          "path": "xxxx/xxxxxx",
          "style": {
            "navigationBarTitleText": "模板页面"
          }
        }
      ]
    }
  ],

其中root字段对应建立的上面的文件夹目录名称;name字段需要自定义一个名字下面规则里面会用到

  1. 在pages与subPackages的同级结构中再建立一个preloadRule的字段,此为一个对象;里面是设定的分包规则;代码示例如下:
"preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": [
        "indexOthers"
      ]
    },
    "pages/clue/clue": {
      "network": "all",
      "packages": [
        "clueOthers"
      ]
    },
    "pages/manage/manage": {
      "network": "all",
      "packages": [
        "manageOthers"
      ]
    },
    "pages/my/my": {
      "network": "all",
      "packages": [
        "myOthers"
      ]
    }
  },

每一个字段都要一一对应;第一行对应pages里面的path路径;network里面有几个参数,目前我均使用all,代表无论是什么网络情况都直接下载对应包的资源;packages字段里面是对应的在subPackages里面自定的name名称。

总结:以上就是所有的分包流程,我在项目中运用了,效果还是可以的,如有其它问题欢迎留言交流。
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值