小程序使用分包整体大小可达到20M
前言:(*方法与解释均摘取官方)
小程序因为体型太小是不支持打包下来特别大的,最新官方支持的总包是20m,单个文件包是2m.
官方入口: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
目录:
分包加载
使用分包
配置方法
打包原则
引用原则
低版本兼容
示例项目
独立分包
配置方法
限制
注意事项
低版本兼容
分包预下载
配置方法
限制
分包加载
微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本,可点此下载。
某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
目前小程序分包大小有以下限制:
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
使用分包
配置方法
假设支持分包的小程序目录结构如下:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json subpackages
字段声明项目分包结构:
写成 subPackages 也支持。
{"pages":["pages/index","pages/logs"],"subpackages": [{"root": "packageA","pages": ["pages/cat","pages/dog"]}, {"root": "packageB","name": "pack2","pages": ["pages/apple","pages/banana"]}]
}
subpackages
中,每个分包的配置有以下几项:
字段 | 类型 | 说明 |
---|---|---|
root | String | 分包根目录 |
name | String | 分包别名,分包预下载时可以使用 |
pages | StringArray | 分包页面路径,相对与分包根目录 |
independent | Boolean | 分包是否是独立分包 |
打包原则
- 声明
subpackages
后,将按subpackages
配置路径进行打包,subpackages
配置路径外的目录将被打包到 app(主包) 中 - app(主包)也可以有自己的 pages(即最外层的 pages 字段)
subpackage
的根目录不能是另外一个subpackage
内的子目录tabBar
页面必须在 app(主包)内
引用原则
packageA
无法 requirepackageB
JS 文件,但可以 requireapp
、自己 package 内的 JS 文件packageA
无法 importpackageB
的 template,但可以 requireapp
、自己 package 内的 templatepackageA
无法使用packageB
的资源,但可以使用app
、自己 package 内的资源
低版本兼容
由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subpackage
里面的路径放到 pages 中。
示例项目
下载 小程序示例(分包加载版)源码
独立分包
微信客户端 6.7.2,基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本,可点此下载。
独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。
开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。
一个小程序中可以有多个独立分包。
小游戏在基础库v2.12.2开始支持独立分包,详见 小游戏独立分包指南。
配置方法
假设小程序目录结构如下:
├── app.js
├── app.json
├── app.wxss
├── moduleA
│ └── pages
│ ├── rabbit
│ └── squirrel
├── moduleB
│ └── pages
│ ├── pear
│ └── pineapple
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在app.json
的subpackages
字段中对应的分包配置项中定义independent
字段声明对应分包为独立分包。
{"pages": ["pages/index","pages/logs"],"subpackages": [{"root": "moduleA","pages": ["pages/rabbit","pages/squirrel"]}, {"root": "moduleB","pages": ["pages/pear","pages/pineapple"],"independent": true}]
}
限制
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
此外,使用独立分包时要注意:
- 独立分包中不能依赖主包和其他分包中的内容,包括js文件、template、wxss、自定义组件、插件等。主包中的
app.wxss
对独立分包无效,应避免在独立分包页面中使用app.wxss
中的样式; App
只能在主包内定义,独立分包中不能定义App
,会造成无法预期的行为;- 独立分包中暂时不支持使用插件。
注意事项
(1)关于 getApp()
与普通分包不同,独立分包运行时,App
并不一定被注册,因此 getApp()
也不一定可以获得 App
对象:
- 当用户从独立分包页面启动小程序时,主包不存在,
App
也不存在,此时调用getApp()
获取到的是undefined
。 当用户进入普通分包或主包内页面时,主包才会被下载,App
才会被注册。 - 当用户是从普通分包或主包内页面跳转到独立分包页面时,主包已经存在,此时调用
getApp()
可以获取到真正的App
。
由于这一限制,开发者无法通过 App
对象实现独立分包和小程序其他部分的全局变量共享。
为了在独立分包中满足这一需求,基础库 2.2.4 版本开始 getApp
支持 [allowDefault
]参数,在 App
未定义时返回一个默认实现。当主包加载,App
被注册时,默认实现中定义的属性会被覆盖合并到真正的 App
中。
示例代码:
- 独立分包中
const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}
- app.js 中
App({data: 123,other: 'hello'
})console.log(getApp()) // {global: {}, data: 456, other: 'hello'}
(2)关于 App
生命周期
当从独立分包启动小程序时,主包中 App
的 onLaunch
和首次 onShow
会在从独立分包页面首次进入主包或其他普通分包页面时调用。
由于独立分包中无法定义 App
,小程序生命周期的监听可以使用 wx.onAppShow,wx.onAppHide 完成。App
上的其他事件可以使用 wx.onError,wx.onPageNotFound 监听。
低版本兼容
在低于6.7.2版本的微信中运行时,独立分包视为普通分包处理,不具备独立运行的特性。
注意:在兼容模式下,主包中的 app.wxss
可能会对独立分包中的页面产生影响,因此应避免在独立分包页面中使用 app.wxss
中的样式。
分包预下载
基础库 2.3.0 开始支持,低版本需做兼容处理。 开发者工具请使用 1.02.1808300 及以上版本,可点此下载。
开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。对于独立分包,也可以预下载主包。
分包预下载目前只支持通过配置方式使用,暂不支持通过调用API完成。
vConsole 里有
preloadSubpackages
开头的日志信息,可以用来验证预下载的情况。
配置方法
预下载分包行为在进入某个页面时触发,通过在 app.json
增加 preloadRule
配置来控制。
{"pages": ["pages/index"],"subpackages": [{"root": "important","pages": ["index"],},{"root": "sub1","pages": ["index"],},{"name": "hello","root": "path/to","pages": ["index"]},{"root": "sub3","pages": ["index"]},{"root": "indep","pages": ["index"],"independent": true}],"preloadRule": {"pages/index": {"network": "all","packages": ["important"]},"sub1/index": {"packages": ["hello", "sub3"]},"sub3/index": {"packages": ["path/to"]},"indep/index": {"packages": ["__APP__"]}}
}
preloadRule
中,key
是页面路径,value
是进入此页面的预下载配置,每个配置有以下几项:
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
packages | StringArray | 是 | 无 |
进入页面后预下载分包的 root 或 name 。__APP__ 表示主包。
|
network | String | 否 | wifi |
在指定网络下预下载,可选值为:all : 不限网络wifi : 仅wifi下预下载
|
限制
同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。
如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。
小程序使用分包整体大小可达到20M相关推荐
- 微信小程序 31 分包机制
31.1 常规分包 如果说 我们写的小程序 整体 大于了 2M 怎么办呢?可以说这个情况 在如今小程序 日益壮大 .火热 下,是很容易出现的.一个好的小程序 必定会很大.功能多,界面多,无论你怎么 做 ...
- hbuilderx 小程序分包_基于uniapp的微信小程序之分包
0. 缘由 最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下 ...
- c语言做一个小程序报告,《C语言程序设计实践》课程报告30个小程序组合成一个大程序.doc...
北方民族大学 课 程 报 告 课 程 名 称: 程序设计实践 专 业 班 级 : 软件工程(2)班 学 生 姓 名 : 李思良 学 号 : 任 课 教 师 : 王晓锋 学 期 : 2015-2016学 ...
- 小程序打包体积过大的解决方案
一 背景 分包是小程序给出的类似于web异步引入的一个方案,把一些初始进入时不需要的页面放到分包里,跳转到对应页面时再去下载分包,从而有效减少主包体积. 项目背景: 公司的小程序项目使用taro来实现 ...
- 微信小程序的分包功能
微信小程序的分包 做小程序开发的人都知道,微信小程序上传包的大小最大为2M,,超过之后就无法上传,那么我们如何解决较大的项目呢,那么就要采用分包配置了,下面是分包的一些说明: 微信小程序每个分包的大小 ...
- 微信小程序之分包加载,解决代码超过2M的方法
2017.01.09 小程序上线时,微信限制了代码包不能超过1MB 大小,(现在是2M了)限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开" ...
- 微信小程序_23,分包
什么是分包: 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时,打包成不同的分包,用户在使用时按需进行加载 分包的好处: 可以优化小程序首次启动的下载时间 在多团队共同开发时可以更 ...
- uniapp发布微信小程序vendor.js过大
1.分包加载,小程序限制一个包2M,可以分9个子包,整包共计不能超出20M,这一步很简单,如果看文档感觉枯燥的可以参考uview框架的demo,因为这个demo就使用了小程序的分包机制,demo链接( ...
- 微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案 微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
最新文章
- Python组合数据类型之序列类型
- 重定向程序无法决定链接类型 解决方案
- python事件处理函数_事件驱动的简明讲解(python实现)
- Apache ActiveMQ中的消息级别授权
- HTML.parser和正则解析,正则表达式+HTMLParser使用详.ppt
- Linux——alias 设置别名详解
- 关系数据库SQL之可编程性存储过程 1
- SpringCloud Ribbon负载均衡介绍及使用
- 95-080-054-源码-启动-启动TaskManager
- 03矩阵02——初等变换与高斯消元法、行阶梯形矩阵、行简化阶梯形矩阵、行阶梯形状与方程组解的关系、相抵
- 用友NC63 医药行业 消耗汇总 出库单批次模糊查询
- python django文档_翻译:Django官方文档-前言
- 智慧路灯综合解决方案
- Webgl(ThreeJS)空间测量\测距功能(附工程文件)
- 一起来吐槽:想颠覆大数据行业的FEB,真的具有价值吗?
- MATLAB 剔除异常点
- ThinkPad平板电脑在定价上还存在的一个问题是
- 惊心动魄修复U盘【另附U盘量产工具】(显示文件格式为RAW 需要格式化)
- 基于SigmaStudio DSP车载音频功放开发流程
- 零信任实践之单包认证(SPA)