uni-app做微信小程序的分包处理

Posted 2023-03-30 Baobao小包

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app做微信小程序的分包处理相关的知识，希望对你有一定的参考价值。

我们的都知道微信小程序有随即随用，用完即走的优点，并且它开发门槛低，但是它也有一个致命的缺点，就是代码包体积的限制，这一缺点让小程序的开发有了一定的限制，现在有一方法可以减少代码包的体积，能够让小程序的功能得到一定的扩展，这一方法就是——分包。

一、分包是什么

分包指的是把一个完整的小程序项目，按照不同的需求划分为不同的子包，在构建时打包成不同的分包，用户在浏览时按需加载。这样，在小程序启动的时候，默认会先下载主包并启动主包内的内面，当用户进入分包内的某个页面时，客户端再把对应的分包下载下来，下载完成之后再进行显示。

二、如何进行分包

1. 配置

需要在 pages.json 文件中添加 subPackages 属性进行配置，如下所示：


	"pages": [ 
		
			"path": "pages/index/index",
			"style": 
				"navigationBarTitleText": "首页"
			
		,
	],
    // 分包处理
	"subPackages": [
		
			"root": "packageA",
			"pages": [
				
					"path": ""
				
			]
		,
		
			"root": "packageB",
			"pages": [
				
					"path": ""
				
			]
		
	]

root：分包的根路径；

name：分包别名，分包预加载的时候使用；

page：分包页面路径，相对于分包根节点的路径（与外层的pages用法相同）；

independent：分包是否独立分包；

2. 分包后的文件列表

3. 打包原则

按 subPackages 配置路径进行打包，此路径之外的目录会被打包到主包中
subpackage 的根目录不能是另一个 subpackage 内的子目录
tabbar 页面必须在主包内

4. 引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源。

三、独立分包和普通分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中的页面进入小程序时，不需要下载主包，只有当用户进入普通分包或主包内的页面时，主包才会被下载。

independent 属性来判断分包是不是独立分包，独立分包不依赖主包就可以运行，可以很大程度上提升分包页面的启动速度。

独立分包如下所示：

// 分包处理
"subPackages": [
	
		"root": "moduleA",
		"pages": [
			
				"path": ""
			
		],
        "independent": true // 独立分包
	,
	
]

四、分包预加载

分包预加载行为是在进入某个页面时触发，通过在 pages.json 文件中添加 preloadRule 属性来配置，如下所示：


    "subPackages": [
        
            "root": "packageA",
            "name": "pack1",  // 预加载时使用
            "pages": []
        ,
        
            "root": "packageB",
            "name": "pack2",  // 预加载时使用
            "pages": []
        ,
    ],
    // 预加载
    "preloadRule": 
        "pages/index": 
            "network": "",
            "packages": ["pack1"]  // 在 pages/index 页面中预加载名为 pack1 分包内容

preloadRule 中，key 是页面路径，value 是进入此页面需要预加载的配置；

value 配置中的 network 是指定在什么网络下预加载（all 表示不限网络、wifi 仅无限网络下预加在），packages 是指在 key 页面时需要预加在的分包（用分包中的 root 或 name 属性表示，_APP_ 代表主包）；

五、主包分包限制

整个小程序所有分包大小不超过 20M。

单个分包 / 主包大小不能超过 2M。

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

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 是进入此页面的预下载配置，每个配置有以下几项：