uni-app开发经验分享十四:小程序超过2M限制的方法——分包加载
起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,
希望用户在使用任何一款小程序时,都能获得一种“秒开”体验。但是,2MB也限制了小程序功能的扩展,小程序业务的发展
可能需要更大的体积。为了解决这个问题,微信推出了—分包加载。
小程序分包加载
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
目录结构:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── my
├── packageB
│ └── list
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json subpackages或subPackages 字段声明项目分包结构:
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"my"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"list"
]
}
]
}
分包预下载
开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。对于独立分包,也可以预下载主包。
分包预下载目前只支持通过配置方式使用,暂不支持通过调用API完成。
配置方法
预下载分包行为在进入某个页面时触发,通过在 app.json 增加 preloadRule 配置来控制
{
"pages": ["pages/index"],
"subpackages": [
{
"root": "sub1",
"name": "hello",
"pages": ["index"],
},
{
"root": "sub2",
"pages": ["index"],
}
],
"preloadRule": {
"sub1/index": {
"packages": ["__APP__"]
},
"sub2/index": {
"packages": ["hello"]
}
}
}
preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。__APP_表示主包。 |
network | String | 否- | wifi | 在指定网络下预下载,可选值为:all: 不限网络,wifi: 仅wifi下预下载 |
打包原则
声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到 app(主包) 中tabBar 页面必须在 app(主包)内
分包加载的低版本兼容
由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subpackage 里面的路径放到 pages 中。
uni-app开发经验分享十四:小程序超过2M限制的方法——分包加载的更多相关文章
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...
- 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 微信小程序开发——设置默认图片、错误加载图片
小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...
- 微信小程序开发--模板(template)使用,数据加载,点击交互
微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...
- 微信小程序之下拉刷新,上拉加载更多
近日开发微信小程序,发现上拉加载更多没有友好的API,而下拉刷新很nice,所以本人按照API,很简单的写了一个示例,希望对大家有帮助,本人用的是iview-webapp 小程序UI框架. 1. 首 ...
- 微信小程序采坑之上拉触底加载更多和下拉刷新
小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...
- 微信小程序 在使用wx.request时显示加载中
微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...
随机推荐
- Python的环境是如何安装的,我来教你
01 初见Python Python编程语言是荷兰人Guido van Rossum在1990年代开发出来的. Gudio拥数学和计算机双硕士学位,但他更喜欢计算机.当时Gudio觉得现有的编程语言无 ...
- Python 设计模式——单例模式
单例模式即确保类有且只有一个特定类型的对象,并提供全局访问点.因此通常用于日志记录.数据库操作.打印机后台处理程序等.这些程序在运行过程中只生成一个实例,避免对同一资源产生相互冲突的请求. 特点: 确 ...
- Centos7路由设置
再添加路由时,很多时候都是采用命令行用route添加的.但是在机器重启后.就失效了.这里也是参考了几位博主的经验 作出以下记载 一:路由表常用设置 1.route命令路由表常用设置: //添加到主机的 ...
- pixi.js 简单交互事件(点击、缩放、平移)
注意:本文代码使用的Pixi.js版本为PixiJS 5.3.3 pixi中常用的鼠标交互事件: //兼容鼠标和触摸屏的共同触发 type InteractionPointerEvents = &qu ...
- C# IAsyncEnumerable Linq使用
NET Core 3.0和C# 8.0最激动人心的特性之一就是IAsyncEnumerable<T>(也就是async流).但它有什么特别之处呢?我们现在可以用它做哪些以前不可能做到的事? ...
- ASP.NET Core 中间件 自定义全局异常中间件以及 MVC异常过滤器作用
中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 选择是否将请求传递到管道中的下一个组件. 可在管道中的下一个组件前后执行工作. 请求委托用于生成请求管道. 请求委托处理每个 HTTP ...
- Autofac的基本使用---5、常用配置
Autofac的基本使用---目录 创建实例方法 参考:http://www.cnblogs.com/manglu/p/4115128.html InstancePerDependency 对每一个依 ...
- sqlserver 汉字转全拼函数
create function fn_Getquanpin (@str varchar(100)) returns varchar(8000) as begin declare @re varchar ...
- MySQL如何优雅的删除大表
前言 删除表,大家下意识想到的命令可能是直接使用DROP TABLE "表名",这是初生牛犊的做法,因为当要删除的表达空间到几十G,甚至是几百G的表时候.这样一条命令下去,MySQ ...
- 道高一丈,且看CWE4.2的新特性
摘要:CWE在今年2/24发布4.0,首次将硬件安全漏洞纳入了CWE中,6/25发布4.1, 8/20就发布了4.2. 1. 按照惯例,先说故事 我们先说下CWE的幕后老板--MITRE[1]. MI ...