uni-app 小程序分包

小程序创建完成后，只有一个主包

image.png

分包原因

大部分小程序要求压缩包体积不能大于 2M，否则无法真机运行，真机调试和发布
基本当小程序超过2M之后就需要进行分包
分包后可解决 2M 限制，并且能分包加载内容，提高性能
各平台目前对分包个数没有限制

加载说明

主包：小程序首次启动的时候，默认就会加载的包，在没有分包的情况下整个工程就可以看做是一个主包，小程序为了支撑起第一次启动后页面的展示，会加载所有的包资源，不管页面中有些模块有没有用得到，都会加载，这样势必就会导致在首次启动的时候，由于包的体积过大，加载时间过长，造成用户体验就不是很好，考虑到这一个层面，各家的小程序包都是有大小限制的，因为你不能让小程序变得臃肿得像个APP，那样就失去了小程序轻巧、方便的意义了
子包（分包）：为了避免在第一次启动的时候，加载的主包过大，这个时候我们就可以考虑将主包进行拆分，拆分为一些小的子包，这样在启动的时候，我们只要加载主包，足够支撑第一次页面展现即可，在后续点击子模块的时候，再逐个根据需要加载对应的子包，这样就避免了主包过大的问题。当然每个子包也是有大小限制的。

各平台小程序包大小限制说明

微信小程序每个分包的大小是2M，总体积一共不能超过20M。
百度小程序每个分包的大小是2M，总体积一共不能超过8M。
支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。
QQ小程序主包大小不能超过 4M，单个分包大小无限制，总体积一共不能超过20M。
字节小程序单个主包不超过 4M，单个分包大小无限制，总体积一共不能超过20M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。

分包大小可能会更改，分档可能更新不及时，附带相关分包信息超链接，方便自行查看

分包方式

目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb [详见uniCloud]
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录  /  主包
│  ├─static             分包可以拥有自己独立的static目录，用来对静态资源进行分包
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─pagesA                 业务页面文件存放的目录 / 分包A
│  ├─static             分包可以拥有自己独立的static目录，用来对静态资源进行分包
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─pagesB                 业务页面文件存放的目录 / 分包B
│  ├─static             分包可以拥有自己独立的static目录，用来对静态资源进行分包
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              这里是uni-app内置的常用样式变量

常规分包

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

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

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

主包：
1). 主包来源：除了分包以外的内容都会被打包到主包中
2). 通常放置启动页/tabBar 页面

独立分包

设置 independent 为 true
特点 :

独立分包可单独访问分包的内容，不需要下载主包
独立分包不能依赖主包或者其他包的内容

使用场景

通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包
临时加的广告页或者活动页

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
此外，使用独立分包时要注意:

独立分包中不能依赖主包和其他分包中的内容**，包括 js 文件、template、wxss、自定义组件、插件等（使用分包异步化时 js 文件、自定义组件、插件不受此条限制）

主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；

App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；

独立分包中暂时不支持使用插件。

分包预下载

配置

app.json 中设置 preloadRule 选项
key(页面路径 ): {packages: [ 预下载的包名 || 预下载的包的根路径 ])}

特点

在加载当前包的时候可以设置预下载其他的包
缩短用户等待时间，提高用户体验

限制

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

编辑page.json文件配置项列表

{
    //主包的路由配置
   "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "主包"
        }
    }],
    //定义好子包，可以包含多个子包
    "subPackages": [{
         //A包的根路径，各个子页面访问路由是：root路径 + 子页面的path
       "root": "pagesA",
        "pages": [{
            "path": "modular1/index1",
            "style": { }
        }, {
            "path": "modular1/index2",
            "style": { }
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "modular1/menu1",
            "style": { }
        }]
    }],
    //定义预加载
    "preloadRule": {
        //当访问到该路由的页面时，会顺带预加载对应的包(可以是主包，也可以是子包)
        "pages/index/index": {
            "network": "all",
            "packages": ["pagesB"]
        }
    }
}