uniapp开发微信小程序---分包

一、前言

juejin.cn/user/840368...

`分包优点`

减小主包体积：通过将小程序的部分页面和资源分离到分包中，可以减少主包的体积，从而加快小程序的启动速度。
按需加载：用户访问特定功能时，才加载对应的分包，这样可以节省用户的网络流量和时间，提高用户体验。
提高性能：分包加载可以减轻主包的压力，使得小程序在运行时更加流畅，尤其是在资源较多的情况下。
模块化管理：开发者可以将小程序的功能模块化，便于管理和维护，提高代码的可读性和可维护性。
支持更大规模的应用：通过使用分包，小程序能够支持更多的页面和功能，适应复杂业务需求。

`大小限制`

1.整个小程序分包（即总和）大小不超过 20MB

2.单个包不能超过 2MB

`注意事项`

1.tabBar 页面必须在主包内
2.最外层的 pages 字段，属于主包的包含的页面
3.按 subpackages 配置路径进行打包，配置路径外的目录将被打包到主包中
4.分包之间不能相互嵌套，subpackage 的根目录不能是另外一个 subpackage 内的子目录

`引用原则`

1、主包无法引用分包内的私有资源。
2、分包之间不能相互引用私有资源。
3、分包可以引用主包内的公共资源。

二、分包基本流程

juejin.cn/user/840368...

1、基础文件结构及pages

项目文件结构

pages.json

2、需要分包时则在pages文件夹同级创建分包文件夹，并将分包模块内容移入

素材同样移入分包
下列为分包后文件结构

3、配置分包及pages.json

配置分包 manifest.json
将下列代码加入小程序配置，如图所示

json 复制代码

    "optimization": {
      "subPackages": true
    }

pages.json

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

字段	类型	说明
root	String	分包根目录
name	String	分包别名，分包预下载时可以使用
pages	StringArray	分包页面路径，相对与分包根目录
independent	Boolean	分包是否是独立分包

perl 复制代码

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "主页模块"
      }
    },
    {
      "path": "pages/list/index",
      "style": {
        "navigationBarTitleText": "列表模块"
      }
    }
  ],
  "subpackages": [
    {
      //此处需对应文件夹名称
      "root": "module1-package",
      //此处分包对应各分包页面
      "pages": [
        {
          "path": "pages/module1/index",
          "style": {
            "navigationBarTitleText": "其他模块1"
          }
        }
      ]
    }, {
      "root": "module2-package",
      "pages": [
        {
          "path": "pages/module2/index",
          "style": {
            "navigationBarTitleText": "其他模块2"
          }
        }
      ]
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {
  }
}

4、页面跳转及素材使用

页面跳转
例: 当前为主页 - 跳转模块1页面

css 复制代码

uni.navigateTo({
    url: '/module1-package/pages/module1/index'
});

素材使用
例1: 当前为模块1页面 - 使用模块1素材
例2: 当前为模块1页面 - 使用主包素材（公共资源）

xml 复制代码

    <!--模块1使用模块1素材-->
    <image class="logo" src="/module1-package/static/module1-img.jpg"></image>
    <!--模块1使用主包素材-->
    <image class="logo" src="/static/logo.png"></image>

三、扩展使用

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

字段	类型	说明
root	String	分包根目录
name	String	分包别名，分包预下载时可以使用
pages	StringArray	分包页面路径，相对与分包根目录
independent	Boolean	分包是否是独立分包

1、分包预下载

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

`限制`

同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。

perl 复制代码

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "主页模块"
      }
    },
    {
      "path": "pages/list/index",
      "style": {
        "navigationBarTitleText": "列表模块"
      }
    }
  ],
  "subpackages": [
    {
      //此处需对应文件夹名称
      "root": "module1-package",
      //此处同主包即可
      "pages": [
        {
          "path": "pages/module1/index",
          "style": {
            "navigationBarTitleText": "其他模块1"
          }
        }
      ]
    }, {
      "root": "module2-package",
      "name": "module2-package-name",
      "pages": [
        {
          "path": "pages/module2/index",
          "style": {
            "navigationBarTitleText": "其他模块2"
          }
        }
      ]
    }
  ],
  "preloadRule": {
    //此处"pages/index/index"为某个页面开始触发预加载
    "pages/index/index": {
      // network为网络环境 非必填参数  all不限网络  默认wifi
      "network": "all",
      // 加载哪些分包， 写入root 或 name,  __APP__ 表示主包。
      "packages": ["module1-package"]
    },
    "pages/list/index": {
      "packages": ["module1-package", "module2-package-name"]
    },
    "module2-package/pages/module2/index": {
      "packages": ["__APP__"]
    }
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {
  }
}

2、独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。
一个小程序中可以有多个独立分包。
独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。
主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
独立分包中暂时不支持使用插件。

json 复制代码

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "主页模块"
      }
    },
    {
      "path": "pages/list/index",
      "style": {
        "navigationBarTitleText": "列表模块"
      }
    }
  ],
  "subpackages": [
    {
      //此处需对应文件夹名称
      "root": "module1-package",
      "name": "module1-package-name",
      //此处同主包即可
      "pages": [
        {
          "path": "pages/module1/index",
          "style": {
            "navigationBarTitleText": "其他模块1"
          }
        }
      ]
    }, {
      "root": "module2-package",
      "name": "module2-package-name",
      "pages": [
        {
          "path": "pages/module2/index",
          "style": {
            "navigationBarTitleText": "其他模块2"
          }
        }
      ],
      "independent": true
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {
  }
}