当前位置：首页 > news >正文

小程序分包和预加载

news 2025/7/27 22:24:58

一、目的

分包的目的：

提升小程序的首屏加载速度，其原理和PC端网页的路由懒加载非常类似。即当我们第一个打开一个小程序的时候，只加载主包以及一些公共的资源，当调到某个页面的时候，在加载该页面所在的分包，目前微信小程序，总包大小不操作20M，分包的各种不超过10个，每个大小不超过2M。

预加载：预先加载的意思，进一步提示小程序的渲染速度。

二、分包

uniapp 实现分包：

1、在manifest.json文件中开启分包模式

/* 小程序特有相关 */"mp-weixin": {"optimization": {"subPackages": true}},

2、针对每个分包建立独立的文件夹，文件夹里面一般包含 pages/static 两个文件夹，分别用于存放当前分包的页面和静态资源（图片）

3、在pages.json中声明分包的结构

//声明分包结构"subPackages": [//数组中的一个对象就对应着一个分包{"root": "goods-package",//分包的文件夹的名称//该分包中的页面路径"pages": [{"needLogin": false,"path": "pages/goodDetail/goodDetail"}]},],

在微信开发者工具中可以看到分包的结构

原生小程序分包：

1、配置 app.json 文件

{"pages": [// 主包里面的页面路径配置"pages/tabBar/index/index","pages/login/adminLogin/login",...],"subpackages": [// 分包的配置{"root": "plateMake",  // 分包包名"name": "车牌预约","pages": [// 分包的页面配置"views/index/index",...]},... // 其他分包配置]// 省略其他...
}

写完分包之后，如果对应的文件夹和页面不存在，它会自动创建文件夹和页面。

其他设置及页面同 uniapp 的一样

三、预加载

uniapp：

在pages.json中配置

"preloadRule":{//key(在哪个页面中需要做分包的预加载)：value(预加载的一些配置)"pages/category/category":{"network": "all","packages": ["goods-package"]//需要预加载的分包}
},

原生开发：

在 app.json 增加 preloadRule 配置来控制。

{"pages": ["pages/tabBar/index/index",...],"subpackages": [{"root": "plateMake","name": "车牌预约","pages": ["views/index/index",...]},{"root": "indep","pages": ["index"],"independent": true}],"preloadRule": {"pages/tabBar/index/index": {"network": "all","packages": ["important"]},"indep/index": {"packages": ["__APP__"]}}
}

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

字段	类型	必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的 `root` 或 `name`。`__APP__` 表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为： `all`: 不限网络 `wifi`: 仅wifi下预下载