小程序--分包加载

news/2025/1/15 15:23:55/

分包加载

微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本,可点此下载。

某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 8M
  • 单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

使用分包

配置方法

假设支持分包的小程序目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.json subPackages 字段声明项目分包结构:

{"pages":["pages/index","pages/logs"],"subPackages": [{"root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] } 

subPackages 中,每个分包的配置有以下几项:

字段类型说明
rootString分包根目录
nameString分包别名,分包预下载时可以使用
pagesStringArray分包页面路径,相对与分包根目录
independentBoolean分包是否是独立分包

打包原则

  • 声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目录将被打包到 app(主包) 中
  • app(主包)也可以有自己的 pages(即最外层的 pages 字段)
  • subPackage 的根目录不能是另外一个 subPackage 内的子目录
  • tabBar 页面必须在 app(主包)内

引用原则

  • packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件
  • packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template
  • packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源

低版本兼容

由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subPackage 里面的路径放到 pages 中。

示例项目

下载 小程序示例(分包加载版)源码

独立分包

微信客户端 6.7.2,基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本,可点此下载。

独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

小游戏不支持独立分包。

配置方法

假设小程序目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在app.jsonsubPackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{"pages": ["pages/index","pages/logs"],"subPackages": [{"root": "moduleA", "pages": [ "pages/rabbit", "pages/squirrel" ] }, { "root": "moduleA", "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 会在从独立分包页面首次进入主包或其他普通分包页面时调用。

低版本兼容

在低于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 是进入此页面的预下载配置,每个配置有以下几项:

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

限制

同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。

转载于:https://www.cnblogs.com/zmdComeOn/p/9686114.html


http://www.ppmy.cn/news/613777.html

相关文章

oracle 撤销回退,Oracle 回滚(ROLLBACK)和撤销(UNDO)

五、计算UNDO表空间的大小计算公式:MAX(undoblks)/600 * MAX(maxquerylen)位于v$undostat* db_block_size位于v$parameter--创建演示环境SQL> INSERT INTO tb_test SELECT employee_id,first_name FROM hr.employees;107 rows createdSQL> INSERT INTO tb_tes…

【模拟】不高兴的津津

AC代码 #include <bits/stdc.h> using namespace std; #define ms(a,b) memset(a,b,sizeof(a)) typedef long long ll; inline int read(){int X0,w0; char ch0;while(!isdigit(ch)) {w|ch-;chgetchar();}while(isdigit(ch)) X(X<<3)(X<<1)(ch^48),chgetchar…

图像超分辨率算法:CVPR2020

图像超分辨率算法&#xff1a;CVPR2020 Unpaired Image Super-Resolution using Pseudo-Supervision 论文地址&#xff1a; http://openaccess.thecvf.com/content_CVPR_2020/papers/Maeda_Unpaired_Image_Super-Resolution_Using_Pseudo-Supervision_CVPR_2020_paper.pdf …

oracle insert忽略重复数据,Oracle’INSERT ALL’忽略重复项

在Oracle中,语句要么完全成功要么完全失败(它们是原子的).但是,您可以在某些情况下添加子句来记录异常而不是引发错误&#xff1a;>使用BULK COLLECT – SAVE EXCEPTIONS,如this thread on askTom所示,>或使用DBMS_ERRLOG(我认为10g以后可用).第二种方法都是自动的,这是一…

Codeforces.1051F.The Shortest Statement(最短路Dijkstra)

题目链接 先随便建一棵树。 如果两个点(u,v)不经过非树边&#xff0c;它们的dis可以直接算。 如果两个点经过非树边呢&#xff1f;即它们一定要经过该边的两个端点&#xff0c;可以直接用这两个点到 u,v 的最短路更新答案。 所以枚举每条非树边的两个端点&#xff0c;求一遍这两…

3D目标检测(CVPR2020:Lidar)

3D目标检测&#xff08;CVPR2020&#xff1a;Lidar&#xff09; LiDAR-Based Online 3D Video Object Detection With Graph-Based Message Passing and Spatiotemporal Transformer Attention 论文地址&#xff1a; http://openaccess.thecvf.com/content_CVPR_2020/html/Y…

从加密转型AI:追求可持续性发展还是盲目跟风?

很多批评者曾说&#xff0c;加密行业充斥着流行语&#xff0c;总是在追逐下一个新趋势&#xff0c;甚至会因为过度追求短期利润而忽视了可持续性发展的重要性。在大多数情况下&#xff0c;他们似乎是对的。 上周末&#xff0c;国内最早也是最大的比特币论坛巴比特宣布转型AI赛道…

oracle自增列问题i,关于oracle中自增列问题

昨天去面试&#xff0c;面试官文oracle中有没有自增列&#xff0c;平时没留意&#xff0c;今天查了一下资料&#xff0c;做了个例子。oracle中没有自增列&#xff0c;可以设定, 但手写方法、序列或触发器都可以实现&#xff0c;下面是我实现的一种方法-------------------注释 …