微信小程序-- 分包 - 独立分包 & 分包预下载（四十五）

Posted 2023-04-06 我是夜阑的狗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序-- 分包 - 独立分包 & 分包预下载（四十五）相关的知识，希望对你有一定的参考价值。

💌 所属专栏：【微信小程序开发教程】

😀 作者：我是夜阑的狗🐶

🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！

💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

文章目录

前言
一、分包 - 独立分包
二、分包 - 分包预下载
总结

前言

大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第45篇文章;
今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】，此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

一、分包 - 独立分包

前面已经介绍了分包的概念，通过栗子学习了如在小程序中使用分包，以及分包的一下注意事项。接下来就来讲解一下分包另外一个概念–独立分包 & 分包预下载。话不多说，让我们原文再续，书接上回吧。

1、独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

左边的图是小程序在启动时候，默认先进入主包里，在通过主包来启动小程序，启动成功之后，又可以从主包进行其他分包的页面。一般情况下，小程序是不能默认通过分包打开的，但有的时候需要分包来打开小程序，此时就是需要用到独立分包了，独立分包可以在不打开主包的前提下启动小程序。

2、独立分包和普通分包的区别

最主要的区别：是否依赖于主包才能运行

普通分包必须依赖于主包才能运行。
独立分包可以在不下载主包的情况下，独立运行。

3、独立分包的应用场景

在实际开发过程中，开发者可以按需，将某些 具有一定功能独立性的页面配置 到独立分包中。原因如下：

当小程序从普通的分包页面启动时，需要首先下载主包，这样的话就有点资源上的浪费。
而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

注意：一个小程序中可以有多个独立分包

4、独立分包的配置方法

小程序的目录结构如下所示：

通过 independent 声明独立分包，下面以 packageB 声明独立分包为例，具体代码如下所示：


  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "subpackages": [
    
      "root": "packageA",
      "name": "pack1",
      "pages":[
        "pages/cat/cat",
        "pages/dog/dog "
      ]
    ,
      "root": "packageB",
      "pages": [
        "pages/apple/apple"
      ],
      "independent": true 
    
  ],

5、引用原则

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

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

二、分包 - 分包预下载

1、什么是分包预下载

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

2、配置分包的预下载

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


  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "preloadRule": 
    "pages/contact/contact":
      "packages": ["pack1"],
      "network": "all"
    
  ,

preloadRule 节点里面由键值对构成的，key 为触发分包预下载的页面路径，value 为配置属性。

属性	说明
packages	是必选的，表示进入页面后，预下载那些分包，可以通过 `root` 或 `name` 指定预下载哪些分包。
network	表示在指定的网络模式下进行预下载，可以选值为 `all`（不限网络）和 `wifi` （仅 wifi 模式下进行预下载），默认值为 `wifi`。

可以来看一下运行效果：

当 network 节点为 wifi 时，把连接网络状态设置 4G。

此时，再打开 contact 就会显示报错，可以来看一下运行效果：

3、分包预下载的限制

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

左边的分包总体积是 3M ，大于了 2M，不允许下载，而右边的分包总体积为 1.5M，小于 2M，允许下载。

总结

感谢观看，这里就是分包 - 独立分包 & 分包预下载的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

也欢迎你，关注我。👍 👍 👍

原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

😀 【LeetCode题解（持续更新中）】
🚝 【Java Web项目构建过程】
💛 【微信小程序开发教程】
⚽ 【JavaScript随手笔记】
🤩 【大数据学习笔记（华为云）】
🦄 【程序错误解决方法（建议收藏）】
🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！

微信小程序--分包加载流程

1.为什么要分包

小程序要求压缩包体积不能大于 2M，否则无法发布
实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传
分包后可解决 2M 限制，并且能分包加载内容，提高性能
分包后单个包的体积不能大于 2M
分包后所有包的体积不能大于 16M

2.分包形式

常规分包
独立分包
分包预下载

3.常规分包

1. 开发者通过在 app.json subpackages 字段声明项目分包结构

2. 特点：

a) 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容

b) 分包的页面可以访问主包的文件，数据，图片等资源

c) 主包：

i. 主包来源：除了分包以外的内容都会被打包到主包中

ii. 通常放置启动页/tabBar 页面

3.配置方法

假设支持分包的小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.json subpackages 字段声明项目分包结构：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

subpackages 中，每个分包的配置有以下几项：

项目分包实例：

4.独立分包

1. 设置 independent 为 true

2. 特点 :

a) 独立分包可单独访问分包的内容，不需要下载主包

b) 独立分包不能依赖主包或者其他包的内容

3. 使用场景

a) 通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包

b) 如：临时加的广告页 || 活动页

4.配置方法

假设支持分包的小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

5.限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

此外，使用独立分包时要注意：

独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用分包异步化时 js 文件、自定义组件、插件不受此条限制）
主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
独立分包中暂时不支持使用插件。

项目独立分包实例：

5.分包预下载

1. 配置

a) app.json 中设置 preloadRule 选项

b) key(页面路径 ): {packages: [ 预下载的包名 || 预下载的包的根路径 ])}

2. 特点 :

a) 在加载当前包的时候可以设置预下载其他的包

b) 缩短用户等待时间，提高用户体验

3.配置方法

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：