网站开发专家,网站建设培训班价格,怎样免费做彩票网站,做系统用什么网站一、目的
分包的目的#xff1a;
提升小程序的首屏加载速度#xff0c;其原理和PC端网页的路由懒加载非常类似。即当我们第一个打开一个小程序的时候#xff0c;只加载主包以及一些公共的资源#xff0c;当调到某个页面的时候#xff0c;在加载该页面所在的分包#xf…一、目的
分包的目的
提升小程序的首屏加载速度其原理和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 是进入此页面的预下载配置每个配置有以下几项
字段类型必填默认值说明packagesStringArray是无进入页面后预下载分包的 root 或 name。__APP__ 表示主包。networkString否wifi在指定网络下预下载可选值为all: 不限网络wifi: 仅wifi下预下载 限制
同一个分包中的页面享有共同的预下载大小限额 2M限额会在工具中打包时校验。
如页面 A 和 B 都在同一个分包中A 中预下载总大小 0.5M 的分包B中最多只能预下载总大小 1.5M 的分包。
