@@ -1,58 +0,0 @@ 微信小程序(uniapp)-分包 | 凤凰涅槃进阶之路

微信小程序(uniapp)-分包

Abel sun2022年12月24日约 1398 字大约 5 分钟

微信小程序(uniapp)-分包

1. 简介

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度

  • 主包

    即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;

  • 分包

    根据pages.json的配置进行划分。

1.1 主包与分包加载时机

  • 主包加载时机:

    在小程序启动时,默认会下载主包并启动主包内页面

  • 分包加载时机

    当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。

2. 前置概念

App默认为整包,App下开启分包流程

  1. 在pages.json中配置分包规则

    1. subPackages 节点,分包规则
  2. 在manifest中设置app端开启分包,详见open in new window

    1. optimization:减轻启动时加载的js数量,提升启动速度。

    一旦在pages.json里配置分包,小程序一定生效,而app是否生效,取决于manifest里是否开启

2.1 subPackages 节点

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

属性类型是否必填描述
rootString子包的根目录
pagesArray子包由哪些页面组成,参数同 pagesopen in new window

注意:

  • subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
  • 微信小程序每个分包的大小是2M,总体积一共不能超过20M
  • 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
  • 支付宝小程序每个分包的大小是2M,总体积一共不能超过8M。
  • QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
  • 字节小程序每个分包的大小是2M,总体积一共不能超过16M(字节小程序基础库 1.88.0 及以上版本开始支持,字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本)。
  • 分包下支持独立的 static 目录,用来对静态资源进行分包。
  • uni-app内支持对微信小程序QQ小程序百度小程序支付宝小程序字节小程序(HBuilderX 3.0.3+)分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明open in new window
  • 针对vendor.js过大的情况可以使用运行时压缩代码
  • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
  • cli创建的项目可以在package.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

2.2 optimization 分包优化

可以减轻启动时加载的js数量,提升启动速度。

从uni-app 2.7.12+ 开始,App-vue平台也兼容了小程序的分包配置,但默认并不开启。

在manifest配置以下节点,可以在App端启动分包。

属性类型说明
subPackagesBoolean是否开启分包优化
"app-plus": {
  "optimization": {
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后,必须配置资源释放模式
}

在manifest中启动分包后,需要在pages.json中配置具体的分包规则,与小程序的配置相同,详见此open in new window

也就是一旦在pages.json里配置分包,小程序一定生效,而app是否生效,取决于manifest里是否开启。

注意:

  • App开启分包后,每个分包单独编译成一个js文件(都包含在app内,不会联网下载),当App首页是vue时,可减小启动加载文件大小,提升启动速度。
  • 首页是nvue时,分包不会提升启动速度,nvue本身启动速度就快于vue,也快于开启分包后的首页为vue的应用。如果追求极致启动速度,还是应该使用nvue做首页并在manifest开启fast模式。
  • App页面较少时,分包对启动速度的优化不明显。

2.3. preloadRule

分包预载配置。

配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度

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

字段类型必填默认值说明
packagesStringArray进入页面后预下载分包的 rootname__APP__ 表示主包。
networkStringwifi在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)

app的分包,同样支持preloadRule,但网络规则无效。

3. 分包流程

3.1 划分目录结构

假设支持分包的 uni-app 目录结构如下:

┌─pages

│  ├─index
│  │  └─index.vue

│  └─login
│     └─login.vue

├─pagesA

│  ├─static
│  └─list
│     └─list.vue
├─pagesB

│  ├─static
│  └─detail
│     └─detail.vue

├─static

├─main.js

├─App.vue

├─manifest.json

└─pages.json

3.2 pages.json 配置

在 pages.json 中填写

{
	"pages": [{
		"path": "pages/index/index",
		"style": { ...}
	}, {
		"path": "pages/login/login",
		"style": { ...}
	}],
	"subPackages": [{
		"root": "pagesA",
		"pages": [{
			"path": "list/list",
			"style": { ...}
		}]
	}, {
		"root": "pagesB",
		"pages": [{
			"path": "detail/detail",
			"style": { ...}
		}]
	}],
	"preloadRule": {
		"pagesA/list/list": {
			"network": "all",
			"packages": ["__APP__"]
		},
		"pagesB/detail/detail": {
			"network": "all",
			"packages": ["pagesA"]
		}
	}
}

3.3 manifest.json 配置

"app-plus": {
  "optimization": {
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后,必须配置资源释放模式
}

参考文章

uniapp官网分包open in new window

评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.9.1