uni-app做微信小程序的分包处理

news2024/10/1 22:20:38

我们的都知道微信小程序有随即随用,用完即走的优点,并且它开发门槛低,但是它也有一个致命的缺点,就是代码包体积的限制,这一缺点让小程序的开发有了一定的限制,现在有一方法可以减少代码包的体积,能够让小程序的功能得到一定的扩展,这一方法就是——分包。

一、分包是什么

分包指的是把一个完整的小程序项目,按照不同的需求划分为不同的子包,在构建时打包成不同的分包,用户在浏览时按需加载。这样,在小程序启动的时候,默认会先下载主包并启动主包内的内面,当用户进入分包内的某个页面时,客户端再把对应的分包下载下来,下载完成之后再进行显示。

二、如何进行分包

1. 配置

需要在 pages.json 文件中添加 subPackages 属性进行配置,如下所示:

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
	],
    // 分包处理
	"subPackages": [
		{
			"root": "packageA",
			"pages": [
				{
					"path": ""
				}
			]
		},
		{
			"root": "packageB",
			"pages": [
				{
					"path": ""
				}
			]
		}
	]
}

root:分包的根路径;

name:分包别名,分包预加载的时候使用;

page:分包页面路径,相对于分包根节点的路径(与外层的pages用法相同);

independent:分包是否独立分包;

2. 分包后的文件列表

 3. 打包原则

  • 按 subPackages 配置路径进行打包,此路径之外的目录会被打包到主包中
  • subpackage 的根目录不能是另一个 subpackage 内的子目录
  • tabbar 页面必须在主包内

4. 引用原则

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

三、独立分包和普通分包

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

independent 属性来判断分包是不是独立分包,独立分包不依赖主包就可以运行,可以很大程度上提升分包页面的启动速度。

独立分包如下所示:

// 分包处理
"subPackages": [
	{
		"root": "moduleA",
		"pages": [
			{
				"path": ""
			}
		],
        "independent": true // 独立分包
	},
	
]	

四、分包预加载

分包预加载行为是在进入某个页面时触发,通过在 pages.json 文件中添加 preloadRule 属性来配置,如下所示:

{
    "subPackages": [
        {
            "root": "packageA",
            "name": "pack1",  // 预加载时使用
            "pages": []
        },
        {
            "root": "packageB",
            "name": "pack2",  // 预加载时使用
            "pages": []
        },
    ],
    // 预加载
    "preloadRule": {
        "pages/index": {
            "network": "",
            "packages": ["pack1"]  // 在 pages/index 页面中预加载名为 pack1 分包内容
        }
    }
}

preloadRule 中,key 是页面路径,value 是进入此页面需要预加载的配置;

value 配置中的 network 是指定在什么网络下预加载(all 表示不限网络、wifi 仅无限网络下预加在),packages 是指在 key 页面时需要预加在的分包(用分包中的 root 或 name 属性表示,_APP_ 代表主包);

五、主包分包限制

整个小程序所有分包大小不超过 20M。

单个分包 / 主包大小不能超过 2M。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/348204.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

界面组件Telerik ThemeBuilder R1 2023开创应用主题研发新方式!

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库,加快开发速度。Telerik DevCraft提供最完整的工具箱,用于构建现代和面向未来的业务应用程序,目前提供UI for ASP.NET包含一个完…

汉诺塔递归算法精讲

文章目录前言一、汉诺塔是个啥?二、手动解法三、解法抽象四、递归解法五、总结前言 递归算法是计算机算法中的基础算法,也是非常重要的算法,从某种程度上讲,它有一点儿AI的影子。人脑是可以完成递归思路的,但是对不起…

《爆肝整理》保姆级系列教程python接口自动化(十五)--参数关联接口(详解)

简介 我们用自动化新建任务之后,要想接着对这个新建任务操作,那就需要用参数关联了,新建任务之后会有一个任务的Jenkins-Crumb,获取到这个Jenkins-Crumb,就可以通过传这个任务Jenkins-Crumb继续操作这个新建的任务。 …

自适应布局之淘宝无限适配+rem+微信rpx自适应

一、自适应布局 所谓前端适配,就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度,一种是使用rem自适应布局的flexible.js。 二、当前流行的移动端自适应…

【刷题笔记】--盛最多水的容器--双指针

题目: 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:你不…

Python 高级编程之正则表达式(八)

文章目录一、概述二、正则表达式语法1)字符匹配2)字符集合3)定位符4)分组1、定义分组2、引用分组3、命名分组三、Python 的 re 模块1)re.match() 方法2)re.search() 方法3)re.match() 与 re.sea…

2023最牛教程,手把手教你成为年薪30W的测试开发

随着互联网行业的高速发展,快速高质量的产品版本迭代成为企业始终立于不败之地的迫切需求,而在短期迭代的快节奏中,传统测试工作面对更大压力,无法持续提供高效率高质量的人力支撑,所以越来越多的企业需要技术更为全面…

Leetcode-每日一题1250. 检查「好数组」(裴蜀定理)

题目链接:https://leetcode.cn/problems/check-if-it-is-a-good-array/description/ 思路 方法:数论 题目意思很简单,让你在数组 nums中选取一些子集,可以不连续,子集中的每个数再乘以任意的数的和是否为1&#xff…

netty

Netty的介绍Netty是异步的(指定回调处理)、基于事件驱动的网络应用框架,用于快速开发高性能、高可靠性的网络IO程序。Netty本质是一个NIO框架,适用于服务器通讯相关的多种应用场景,分布式节点远程调用中Netty往往作为R…

RTT 消息邮箱

1.邮箱概念 邮箱服务是实时操作系统中一种典型的线程间通信方法。举一个简单的例子,有两个线程,线程 1 检测按键状态并发送,线程 2 读取按键状态并根据按键的状态相应地改变 LED 的亮灭。这里就可以使用邮箱的方式进行通信,线程 …

SpringCloud保姆级搭建教程五---Redis

首先,这个和微服务没有直接的关系,只是在代码开发当中要使用的一个工具而已,为了提高这个系统的性能,加快查询效率等方面而使用它1、首先,要先安装redis到电脑上,这里依然是在windows上演示,之后…

window11, WSL, Ubuntu 20.04 编译TensorRT源码并且安装 TensorRT

一、安装参考 1.ubuntu18.04TensorRT 配置攻略 ubuntu18.04TensorRT 配置攻略 - 简书卷积网络的量化和部署是重要环节,以前我们训练好模型后直接trace进行调用,参考(C windows调用ubuntu训练的PyTorch模型(.pt/.pth)…

Utkuici:一款功能强大的Nessus自动化任务实现工具

关于Utkuici 今天,随着信息技术系统的普及,网络安全领域的投资已大幅增加。各种规模的组织都需要进行漏洞管理、渗透测试和各种分析,以准确确定各自机构受网络威胁的影响程度。通过借助漏洞管理工具的行业领先者Tenable Nessus,我…

若依ruoyi——手把手教你制作自己的管理系统【三、代码生成】

昨天情人节一( ̄︶ ̄*)) 送给赛利亚一((* ̄3 ̄)╭ ********* 专栏略长 爆肝万字 细节狂魔 请准备好一键三连 ********* 修改后的页面: 干干净净贼舒服一Ψ( ̄∀ ̄)Ψ——Ψ( ̄∀&#x…

Vue一个项目兼容每个省份的个性化需求

开发环境及打包指令 后拼上省份区划"serve:henan": "yarn && vue-cli-service serve -o --encryptSM2 --zone41","serve:hunan": "yarn && vue-cli-service serve -o --encryptSM2 --zone43","serve:guizhou&quo…

电子技术——多阶放大器

电子技术——多阶放大器 实际上的商用放大器是由多个单阶放大器联级而成的多阶放大器。首先第一阶(输入)通常提供一个较大的输出阻抗来保证较小的信号衰减。若是差分放大器,还要保证有较大的共模抑制比。中间各阶放大器负责提供电压增益&…

wireshark在流媒体分析中常见操作

Wireshark Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是截取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换。 在流媒体相关工作中&am…

学英语的优势已来,抓住这个机会

文 / 冰雪(微信公众号:王不留) ChatGPT大火,国外的商业价值还没找到,咱们这边已经开始变现了。谷雨小姐姐昨天在”一起学英语”微信群发了一张“收割韭菜”的文案截图。 299入社群,服务内容为:免…

卷严重、难度高、激励少,如何适应空投市场新变化

自从空投交互从2020年开始之后,不少人都开始加入到空投交互的行列中,一些项目也因为“格局”的因素,在项目正式上线前都会给早期参与者空投代币,以此吸引大家的关注。但是在越来越多的人加入到撸空投行列之中后,现在整…

javaEE 初阶 — 流量控制与拥塞控制

文章目录1. 流量控制2. 拥塞控制TCP 工作机制:确认应答机制 超时重传机制 连接管理机制 滑动窗口 1. 流量控制 流量控制是一种干扰发送的窗口大小的机制,滑动窗口,窗口越大,传输的效率就越高(一份时间,…