微信小程序-分包加载

文章目录

  • 微信小程序-分包加载
    • 概述
    • 基本使用
    • 打包和引用原则
    • 独立分包
    • 分包预下载

微信小程序-分包加载

概述

小程序的代码通常是由许多页面、组件以及资源等组成,随着小程序功能的增加,代码量也会逐渐增加,体积过大就会导致用户打开速度变慢,影响用户的使用体验。

开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

主包: 放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本。

分包: 是根据开发者的配置进行划分。

小程序分包大小限制:

  • 整个小程序所有分包大小不超过 30M(服务商代开发的小程序不超过 20M)
  • 单个分包/主包大小不能超过 2M

在这里插入图片描述

基本使用

配置:

  • 在 app.json 文件中配置 subPackages 声明分包。
  • 每个分包必须指定 root 字段、name 字段、pages 字段:
    • root:指定分包的根目录。
    • name:指定分包的别名。
    • pages:指定分包中包含的页面。

具体代码:

"subPackages": [{"root": "modules/goodModule","name": "goodModule","pages": ["pages/list/list","pages/detail/detail"]},{"root": "modules/markModule","name": "markModule","pages": ["pages/market/market"]}
],

查看:

点击右边的“详情” -> “本地代码” -> “代码依赖分析”,可以看到如下,由此可知目前有一个主包和两个分包。

在这里插入图片描述

点击主包可查看有3个页面,如下:

在这里插入图片描述

跳转分包页面:

主包 -> 分包:

<navigator url="/modules/goodModule/pages/list/list">跳转list页面</navigator>

分包 -> 分包:

<navigator url="../detail/detail">跳转detail页面</navigator>

打包和引用原则

打包原则:

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

引用原则:

  • 主包不可以引用分包的资源,但分包可以使用主包的公共资源
  • 分包与分包之间资源无法相互引用, 分包异步化时不受此条限制

独立分包

独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行

  • 如果是独立分包,不需要下载主包,直接就能够访问,独立分包是自己独立运行的。

  • 而如果是其他分包,需要先下载主包,通过路径访问,才能加载对应路径的分包。

注意:

  1. 独立分包中不能依赖主包和其他分包中的资源。

  2. 主包中的 app.wxss 对独立分包无效。

  3. App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为。

配置:

在 app.json 文件中找到 subPackages 字段,在指定分包中配置 independent 字段。

"subPackages": [{"root": "modules/goodModule","name": "goodModule","pages": ["pages/list/list","pages/detail/detail"]},{"root": "modules/markModule","name": "markModule","pages": ["pages/market/market"],"independent": true}
]

分包预下载

分包预下载是指访问小程序某个页面时,预先下载分包中的代码和资源,以提高用户的使用体验。当用户需要访问分包中的页面时,已经预先下载的代码和资源可以直接使用,通过分包预下载加快了页面的加载速度和显示速度。

配置:

在 app.json 文件中配置 preloadRule。

preloadRule 是一个对象,key 表示进入的页面,value 表示预下载的配置。

字段类型必填默认值说明
packagesStringArray进入页面后预下载分包的 rootname__APP__ 表示主包。
networkStringwifi在指定网络下预下载,可选值为: all: 不限网络 wifi: 仅wifi下预下载
"preloadRule": {// 进入index页面,预下载goodModule分包"pages/index/index": {"network": "all","packages": ["modules/goodModule"]},// 进入market页面,预下载主包"modules/markModule/pages/market/market": {"network": "all","packages": ["__APP__"]}
},

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

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

相关文章

QT——多线程操作

一、单线程和多线程的区别 单线程指的是程序在执行时只有一个流程,也就是一次只能执行一个任务。当程序中某个任务需要花费大量时间时,单线程会导致整个程序阻塞,用户体验会变差。 多线程则是指程序在执行时可以同时执行多个任务,每个任务都是一个独立的线程。多线程可以…

数字IC设计\FPGA 职位经典笔试面试整理--语法篇 Verilog System Verilog(部分)

注&#xff1a; 资料都是基于网上一些博客分享和自己学习整理而成的 Verilog 1. 数据类型 Verilog一共有19种数据类型 基础四种数据类型&#xff1a;reg型&#xff0c;wire型&#xff0c;integer型&#xff0c;parameter型 reg型   reg类型是寄存器数据类型的关键字。寄存…

Spring Boot 点餐系统:您的餐饮助手

第三章 系统分析 3.1 系统设计目标 网上点餐系统主要是为了用户方便对美食信息、美食评价、美食资讯等信息进行查询&#xff0c;也是为了更好的让管理员进行更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定…

Firefox火狐浏览器web开发调试开启强制刷新缓存模式

场景:vuetoken过期或者修改token后&#xff0c;刷新后进不去系统! 解决&#xff1a; 火狐浏览器缓存难清理&#xff0c;用CtrlF5 CtrlR 等在谷歌和IE浏览器的快捷键没用。 火狐清理缓存比较麻烦&#xff0c;默认快捷键 Ctrl Shift Del 键是弹窗选择性清理&#xff0c;还要…

Spring、SpringBoot 框架功能学习

一. Spring核心功能 依赖注入&#xff08;DI&#xff09;&#xff1a;Spring的核心功能是通过依赖注入来管理对象之间的依赖关系。依赖注入是一种将对象的依赖关系注入到被依赖对象中的机制&#xff0c;它可以帮助降低对象之间的耦合度&#xff0c;使得代码更容易维护和测试。 …

springboot接入emqx的mqtt

需求背景 物联网设备需要通过mqtt协议传输,这里记录一下,注意,这篇文章不能接入阿里云的mqtt,本人已经试过,会报错。 开发教程 1、EMQX安装部署 -- 1 安装必要的依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm2-- 2 设置repo库 sudo yum-confi…

原腾讯云AI产品线项目经理李珊受邀为第四届中国项目经理大会演讲嘉宾

全国项目经理专业人士年度盛会 原腾讯云AI产品线项目经理、资深项目管理专家李珊女士受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为&#xff1a;AI助力项目经理的决策支持系统。大会将于10月26-27日在北京举办…

形象解释一下泛化任务和外推任务

泛化任务和外推任务都是神经网络在训练后面临的挑战&#xff0c;但它们的核心区别在于模型面临的数据分布范围。下面我来形象解释这两个任务&#xff0c;并说明它们的不同之处。 1. 泛化任务&#xff08;Generalization Task&#xff09;&#xff1a; 形象解释&#xff1a;假设…

AR传送门+特定区域显示内容+放大镜 效果着色器使用

AR传送门特定区域显示内容放大镜 效果 关键词&#xff1a;Portal Mask 1、教程链接&#xff1a; AR 传送门教程 Unity - Portal Mask Implementation - Part 4_哔哩哔哩_bilibili 应用案例效果&#xff1a; 2、案例下载地址&#xff1a;使用unity 2021.3.33f1 obi 工具…

通过 MQDescriptorSync 实现 HIDL 大数据传递的最佳实践

以下内容来自 Audio HIDL 播放流程&#xff0c;经过了部分修改&#xff0c;但尚未经过测试。 HIDL struct WriteStatus {Result retval;union Reply {uint64_t written; // WRITE command, amount of bytes written, > 0.} reply;};prepareWriting(uint32_t frameSize, ui…

关于生成对抗网络(GAN)损失函数的理解

论文地址:Generative Adversarial Nets 简介 生成对抗网络(Generative Adversarial Network,简称GAN)是一种由Ian Goodfellow等人在2014年提出的深度学习模型。GAN由两个相互对抗的神经网络组成:生成器(Generator)和判别器(Discriminator)。这两个网络通过博弈论的思…

FPGA题目记录1

1、Verilog HDL 是IEEE标准&#xff08;A&#xff09; A正确 B错误 2、Verilog HDL语言编写的程序都是可以被综合的&#xff0c;都能形成网表电路。 &#xff08; 错误 &#xff09; 不完全正确。虽然Verilog HDL&#xff08;硬件描述语言&#xff09;是一种广泛用于描述数字电…

云栖3天,云原生+ AI 多场联动,新产品、新体验、新探索

云栖3天&#xff0c;云原生 AI 20场主题分享&#xff0c;三展互动&#xff0c;为开发者带来全新视听盛宴 2024.9.19-9.21 云栖大会 即将上演“云原生AI”的全球盛会 展现最新的云计算技术发展与 AI技术融合之下的 “新探索” 一起来云栖小镇 见证3天的云原生AI 前沿探索…

时间序列数据可视化

#时间序列可视化 #离散数据的时间序列可视化 import numpy as np import pandas as pdts pd.Series(np.random.randn(1000), indexpd.date_range(1/1/2000, periods1000)) ts ts.cumsum() ts.plot() #%% #连续数据的时间序列可视化 import matplotlib.pyplot as plt df pd.D…

从画质设置看游戏引擎(其一)

前往我的博客&#xff0c;获取无广告&#xff0c;更好的阅读体验 1. 抗锯齿&#xff08;Anti-Aliasing&#xff09; 1.1 锯齿问题的起因 在三维模型的世界中&#xff0c;模型是连续的&#xff0c;但是屏幕像素是不连续&#xff0c;是离散的&#xff1b; 即当一个圆形显示在显…

Ubuntu下使用 python搭建服务实现从web端远程配置设备网口

1、通过文件配置Ubuntu设备网口 在Ubuntu工控机上&#xff0c;通过文件配置网口&#xff08;网络接口&#xff09;可以让网络配置在每次系统启动时自动生效。以下是常见的方法步骤&#xff1a; 1.1 使用 netplan 配置网口&#xff08;Ubuntu 18.04 及以上版本&#xff09; 编…

Vue学习记录之六(组件实战及BEM框架了解)

一、BEM BEM是一种前端开发中常用的命名约定&#xff0c;主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。 Block&#xff08;块&#xff09;&#xff1a;独立的功能性页面组件&#xff0c;可以是一个简单的按钮&#xff0c;一个复杂的导航条&…

【网络底层原理】I/O多路复用技术select、poll和epoll详解与比较

引言 在现代网络编程中&#xff0c;I/O多路复用技术是实现高性能服务器的关键。本文将详细介绍select、poll和epoll这三种技术&#xff0c;并比较它们的工作原理、优势与限制。 1. select 工作原理 select技术使用三个集合&#xff08;读、写、异常&#xff09;来跟踪需要监…

【Python 数据分析学习】Matplotlib 的基础和应用

题目 1 Matplotlib 主要特性2 Matplotlib 基础知识2.1 导入模块2.2 图形构成2.2.1 图形&#xff08;Figure&#xff09;2.2.2 轴 &#xff08;Axes&#xff09;2.2.3 轴线&#xff08;axis&#xff09; 2.5 中文设置2.5.1 借助rcParams修改字体实现设置2.5.2 增加一个fontprope…

基于PHP+MySQL组合开发地方门户分类信息网站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 随着互联网技术的飞速发展&#xff0c;地方门户分类信息网站逐渐成为城市生活不可或缺的一部分。它们涵盖了房产、招聘、二手交易、生活服务等多个领域&#xff0c;为当地居民提供了全方位的信息服务。为了满足这一市场需求&#xff0c;我们开发了这款基于PHPMySQL的…