uniapp中使用分包

分包的说明

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M（开通虚拟支付后的小游戏不超过30M）
• 单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

具体使用方法请参考：

• 使用分包
• 独立分包
• 分包预下载
• 分包异步化

上诉解释为官方解释，通俗的讲就是，不分包的小程序会在加载小程序时候把所有的代码都加载，会导致你第一次打开小程序时间变久，如果分包了就只会在第一次加载的时候先加载主包的内容，分包的内容在后续在加载，很大的提升的了小程序第一次打开的速度。

uniapp分包优化说明

• 在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化
• 目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou的分包优化
• 分包优化具体逻辑：

• • 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
  • js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
  • 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

---

分包使用的思路

在使用分包的配置后，我们会有主包和分包两个目录，这里主包和分包其实是有联系的，一般我们将主包中的页面，如 home - home.vue 做为小程序的首页，那么他能跳转的二级页面都放在一个分包中来加载（如下图的目录结构），这样不会加载多余的分包，也能提高加载分包的速度。

小程序的分包可以都放在一个大的分包中，也可以创建多个分包，只要确保够加载指定的分包信息即可。

分包的使用

❗这里的分包主要是对编译为微信小程序中的分包配置作为解释，如果要转为其他小程序可以参考 manifest.json 应用配置 | uni-app官网 中给出的配置信息来配置

在目录的根节点下找到 pages.json 文件，在和"pages"平级的下面添加如下配置 "subPackages" 对象

subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：

属性	类型	是否必填	描述
root	String	是	子包的根目录
pages	Array	是	子包由哪些页面组成，参数同 pages

{
  	"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTitleText": "我的"
			}
		}],
  // 添加的分包配置（删除注释）
  "subPackages": [
    // 一个对象表示一个分包
    {
			"root": "pagesPackage/minePackage/",
			"pages": [{
					"path": "login/login",
					"style": {
						"navigationStyle": "custom",
						"navigationBarTitleText": "登录",
						"enablePullDownRefresh": false
					}
				}]
		}
	],
}

在 "pages.json" 中添加的分包目录需要自己创建对应的目录，否则会导致报错无法运行。

在创建的分包目录下可以选择创建页面来同步更新 "pages.json" 文件中分包页面的信息。我们在新建的分包目录下创建一个页面 test.vue ，在分包目录下右键-新建页面-弹出信息框选择-创建即可

在 "pages.json" 中的 "subPackages" 配置对象下就可以看到我们刚刚创建的页面就自动添加到上面了。

⛔值得注意的是，越早分包对后面项目的优化越有利，项目晚期分包会导致引用嵌套出现错误，很容易出现分包导致项目无法运行的事情。

引用原则

• 主包无法引用分包内的私有资源
• 分包之间不能相互引用私有资源
• 分包可以引用主包内的公共资源

打包原则

• 小程序会按subpackages的配置进行分包，subpackage之外的目录将被打包到主包中
• 主包也可以有自己的pages(即最外层的pages字段)
• tabBar页面必须在主包内
• 主分包之间不能相互嵌套

最后我们可以查看当前的主包和分包的体积，在微信开发者小程序的右上角的 详情-基本信息-本地代码-代码依赖中看到关系图，可以看到分包的体积节省了100多k，如果在详情将静态文件细分的情况，可以更少的减少主包的体积。

---

参考文档

• 使用分包 | 微信开放文档
• manifest.json 应用配置 | uni-app官网
• pages.json 页面路由 | uni-app官网