微信小程序分包流程

时间：2024-12-03 13:36:21

小程序目录结构

- app.js
- app.json
- app.wxss
- pages  // 主包所有页面
  - index  // 页面内容,包含(index.js,index.wxml,index.json,index.wxss)
  - logs
- packageA // 第一个分包
  - pages // 第一个分包的所有页面
    - index // 页面内容,包含(index.js,index.wxml,index.json,index.wxss)
    - logs
- packageB // 第二个分包
  - pages // 第二个分包的所有页面
    - apple // 页面内容,包含(apple.js,apple.wxml,apple.json,apple.wxss)
    - banana
- utils

配置方法

普通分包

找到app.json内容配置如下:

{
  "pages":[  // 主包所有页面
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [  // 通过subPackages节点,声明分包的结构
    {
      "root":"packageA", // 第一个分包根目录
      "name": "pack1", // 分包的别名
      "pages": [ // 当前分包下,所有页面的相对存放路径
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },{
      "root":"packageB", // 第二个分包根目录
      "name": "pack2", // 分包的别名
      "pages": [ // 当前分包下,所有页面的相对存放路径
        "pages/apple/apple",
        "pages/banana/banana"
      ]
    }
  ]
}

保存app.json就会自动创建分包了,直接在相应页面写代码就好

例如我想去到packageB/pages/banana/banana这个页面,则直接跳转packageB/pages/banana/banana这个地址即可

独立分包

当小程序从普通的分包页面启动时，需要首先下载主包
独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

找到app.json内容配置如下:

{
  "pages":[  // 主包所有页面
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [  // 通过subPackages节点,声明分包的结构
    {
      "root":"packageA", // 第一个分包根目录
      "name": "pack1", // 分包的别名
      "pages": [ // 当前分包下,所有页面的相对存放路径
        "pages/cat/cat",
        "pages/dog/dog"
      ],
      "independent": true  // 加上这个属性为true就是独立分包
    },{
      "root":"packageB", // 第二个分包根目录
      "name": "pack2", // 分包的别名
      "pages": [ // 当前分包下,所有页面的相对存放路径
        "pages/apple/apple",
        "pages/banana/banana"
      ],
      "independent": true  // 加上这个属性为true就是独立分包
    }
  ]
}

引用规则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源，例如:

  • 主包无法引用独立分包内的私有资源
  • 独立分包之间，不能相互引用私有资源
  • 独立分包和普通分包之间，不能相互引用私有资源
  • 特别注意:独立分包中不能引用主包内的公共资源

分包预下载

分包预下载指的是:在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

配置分包的预下载
预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载规则，示例代码如下:

{
  "pages":[  // 主包所有页面
    "pages/index/index",
    "pages/logs/logs"
  ],
  "preloadRule": {  // 分包预下载规则
    "pages/index/index":{ // 触发分包预下载的页面路径
      "network": "all", // 可选值为all(不限网络)和wifi(仅wifi模式下进行预下载),默认值为wifi
      "packages": ["pack1","packageB"] // 表示进入页面后预下载哪些分包,可以通过分包的root值或者name值指定预下载哪些分包
    }
  },
  "subPackages": [  // 通过subPackages节点,声明分包的结构
    {
      "root":"packageA", // 第一个分包根目录
      "name": "pack1", // 分包的别名
      "pages": [ // 当前分包下,所有页面的相对存放路径
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },{
      "root":"packageB", // 第二个分包根目录
      "name": "pack2", // 分包的别名
      "pages": [ // 当前分包下,所有页面的相对存放路径
        "pages/apple/apple",
        "pages/banana/banana"
      ]
    }
  ]
}

同一个分包中的页面享有共同的预下载大小限额 2M

在这里插入图片描述

相关文章