小程序分包加载、独立分包、分包预加载等

一、小程序分包加载

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

分包加载是一种小程序优化技术。将小程序不同功能的代码,分别打包成不同的子包,在构建时打包成不同
的分包,用户在使用时按需进行加载

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包

主包:包含默认启动页面、TabBar 页面以及所有分包都需用到公共资源的包
分包:根据开发者的配置进行划分出来的子包

在这里插入图片描述

二、小程序分包后加载顺序

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

在这里插入图片描述
注意:
目前小程序分包大小有以下限制:
1.整个小程序分包大小不超过 20MB
2.单个分包/主包大小不能超过 2MB

三、配置分包加载以及打包、引用原则

小程序如果需要进行分包加载,需要在 app.json 中,通过 subPackages 或者 subpackages 定义分包结构

每个分包结构含三个常用字段:
1. root :分包的根目录,该目录下的所有文件都会被打包成一个独立的包
2. name:分包的别名,用于在代码中应用该分包
3. pages:指定当前分包中包含哪些页面

示例:
在项目 app.json 中配置

"subPackages": [
    {"root":"modules/goodModule",
      "name":"goodModule",
      "pages": ["pages/list/list","pages/details/details"]
    }
  ]

在使用页面中 如点击跳转到分包页面
== 需要在路径之前添加上分包的根目录路径 root 路径才可以==

<navigator url="/modules/goodModule/pages/list/list">跳转到商品列表分包页面 </navigator>

四、配置分包加载以及打包、引用原则

打包原则:
1.tabBar 页面必须在主包内
2.最外层的 pages 字段,属于主包的包含的页面
3.按 subpackages 配置路径进行打包,配置路径外的目录将被打包到主包中
4.分包之间不能相互嵌套,subpackage 的根目录不能是另外一个 subpackage 内的子目录
引用原则:
1.主包不可以引用分包的资源,但分包可以使用主包的公共资源
2.分包与分包之间资源无法相互引用,分包异步化时不受此条限制 

五、独立分包的配置

独立分包:是指能够独立于主包和其它分包运行的包
从独立分包中页面进入小程序时, 不需要下载主包,当用户进入普通分包或主包内页面时,主包才会被下载
开发者可以及那个功能相对独立的页面配置到独立分包中,因为独立分包不依赖主包就可以运行,可以很大
程度提升分包页面的启动速度。
给 subPackages 定义的分包结构添加 independent 字段,即可声明对应分包为独立分包

示例:
打开 app.json 文件

"subPackages": [
   
    {
      "root":"moudles/marketMoudle",
      "name":"marketMoodule",
      "pages":["pages/market/market"],
      "independent": true
    }
  ]

注意:
1.对立分包中不能依赖主包和其它分包中的资源
2.主包中的 app.wxss 对对立分包无效
3. App只能在主包内定义,独立分包中不能定义App,会造成无法预期的行为

六、分包预下载

分包预下载是指访问小程序某个页面时,预先下载其它分包中的代码和资源,当用户需要访问分包中的页面时,
已经预先下载的代码和资源,因此可以直接使用,从而提高用户的使用体验。
小程序色分包预下载需要在 app.json 中通过 preloadRule 字段设置预下载规则

示例
打开 app.json 文件

 "preloadRule": {
    "pages/index/index":{// 访问哪个路径时进行预加载
      "network": "all",// 需要在什么情况下的网络进行预下载
      "packages": ["goodModule"]//需要提前预加载的分包的目录或别名
    },
      // 预下载独立分包的预下载子包
    "moudles/marketMoudle/pages/market/market":{
      "network": "all",
      "packages": ["marketMoodule"]
    }
  }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot基础入门2(profile应用)

Profile应用 一、何为Profile二、profile配置方式1.多profile文件方式2.yml多文档方式 三、加载顺序1. file:./config/: 当前项目下的/config目录下2. file:./ &#xff1a;当前项目的根目录3. classpath:/config/:classpath的/config目录4. classpath:/ : classpath的根目录 四…

LabVIEW环境下OCR文字识别的实现策略与挑战解析

引言 在自动化测试领域&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术扮演着重要角色&#xff0c;它能够将图像中的文字转换成机器可编辑的格式。对于使用LabVIEW约5个月&#xff0c;主要进行仪器控制与数据采集的你而言…

什么是T0策略?有没有可以持仓自动做T的策略软件?

​​行情低迷&#xff0c;持仓被套&#xff0c;不想被动等待&#xff1f;长期持股&#xff0c;想要增厚持仓收益&#xff1f;有没有可以自动做T的工具或者策略&#xff1f;日内T0交易&#xff0c;做到降低持仓成本&#xff0c;优化收益预期。 什么是T0策略&#xff1f; 可以提…

知识图谱和 LLM:多跳问答

检索增强生成&#xff08;RAG&#xff09;应用程序通过将外部来源的数据集成到 LLM 中&#xff0c;擅长回答简单的问题。但他们很难回答涉及将相关信息之间的点连接起来的多部分问题。这是因为 RAG 应用程序需要一个数据库&#xff0c;该数据库旨在存储数据&#xff0c;以便轻松…

c++ 里如何检测内存泄露:比如用了 new ,但没有用 delete

&#xff08;1 方法一&#xff09; 用 MFC 框架的 F5 不带断点的调试。可以在输出窗口提示是否有内存泄露。 &#xff08;2 方法二&#xff09; &#xff0c;在 main 函数中添加如下代码&#xff0c;用 F5 不带断点的调试&#xff1a; int main() {_CrtSetDbgFlag( _CRTDBG_A…

JAVA 集合+对象复制工具类

JAVA 集合对象复制工具类 import jakarta.annotation.Nullable;import java.util.ArrayList; import java.util.List; import java.util.function.BiFunction; import java.util.function.Consumer;public class BeanUtil extends cn.hutool.core.bean.BeanUtil {/*** 数据拷贝…

Linux高并发服务器开发(十三)Web服务器开发

文章目录 1 使用的知识点2 http请求get 和 post的区别 3 整体功能介绍4 基于epoll的web服务器开发流程5 服务器代码6 libevent版本的本地web服务器 1 使用的知识点 2 http请求 get 和 post的区别 http协议请求报文格式: 1 请求行 GET /test.txt HTTP/1.1 2 请求行 健值对 3 空…

SQL索引事务

SQL索引事务 索引 创建主键约束(primary key),唯一约束(unique),外键约束(foreign key)时,会自动创建对应列的索引 1.1 查看索引 show index from 表名 现在这个表中没有索引,那么我们现在将这几个表删除之后创建新表 我们现在建立一个班级表一个学生表,并且学生表与班级表存…

EVM-MLIR:以MLIR编写的EVM

1. 引言 EVM_MLIR&#xff1a; 以MLIR编写的EVM。 开源代码实现见&#xff1a; https://github.com/lambdaclass/evm_mlir&#xff08;Rust&#xff09; 为使用MLIR和LLVM&#xff0c;将EVM-bytecode&#xff0c;转换为&#xff0c;machine-bytecode。LambdaClass团队在2周…

无人机水运应用场景

航行运输 通航管理&#xff08;海事通航管理处&#xff09; 配员核查流程 海事员通过VHF&#xff08;甚高频&#xff09;系统与船长沟通核查时间。 无人机根据AIS&#xff08;船舶自动识别系统&#xff09;报告的船舶位置&#xff0c;利用打点定位 功能飞抵船舶上方。 使用…

大型能源电力集团需要什么样的总部数据下发系统?

能源电力集团的组织结构是一个复杂的系统&#xff0c;包括多个职能部门和子分公司。这些子分公司负责具体的电力生产、销售、运维等业务。这些部门和公司协同工作&#xff0c;确保电力生产的顺利进行&#xff0c;同时关注公司的长期发展、市场拓展、人力资源管理、财务管理和公…

SCI一区级 | Matlab实现BO-Transformer-LSTM多特征分类预测/故障诊断

SCI一区级 | Matlab实现BO-Transformer-LSTM多特征分类预测/故障诊断 目录 SCI一区级 | Matlab实现BO-Transformer-LSTM多特征分类预测/故障诊断效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.【SCI一区级】Matlab实现BO-Transformer-LSTM特征分类预测/故障诊断&…

winform2

12.TabControl 导航控制条 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace zhiyou_…

发现CPU占用过高,该如何排查解决?

1.使用top命令 查看cpu占用最多的进程 2.使用 top -H -p pid 发现有两个线程占用比较大 3.将线程id转换为16进制 使用命令 printf 0x%x\n pid 4.使用 jstack pid | grep 线程id(16进制&#xff09; -A 20 &#xff08;显示20行&#xff09; 根据代码显示进行错误排查

2024年7月5日 (周五) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 卸载工具 HiBitUninstaller: Windows上的软件卸载工具 《乐高地平线大冒险》为何不登陆…

娱乐圈惊爆已婚男星刘端端深夜幽会

【娱乐圈惊爆&#xff01;已婚男星刘端端深夜幽会&#xff0c;竟是《庆余年》二皇子“戏外风云”】在这个信息爆炸的时代&#xff0c;娱乐圈的每一次风吹草动都能瞬间点燃公众的热情。今日&#xff0c;知名娱乐博主刘大锤的一则预告如同投入湖中的巨石&#xff0c;激起了层层涟…

关于下载obsidian SimpRead Sync中报错的问题

参考Kenshin的配置方法&#xff0c;我却在输入简悦的配置文件目录时多次报错。 bug如下&#xff1a; 我发现导出来的配置文件格式如下&#xff1a; 然后根据报错的bug对此文件名进行修改&#xff0c;如下&#xff1a; 解决。

Java数据结构-树的面试题

目录 一.谈谈树的种类 二.红黑树如何实现 三.二叉树的题目 1.求一个二叉树的高度&#xff0c;有两种方法。 2.寻找二叉搜索树当中第K大的值 3、查找与根节点距离K的节点 4.二叉树两个结点的公共最近公共祖先 本专栏全是博主自己收集的面试题&#xff0c;仅可参考&#xf…

暑假前端知识速成【CSS】系列一

坚持就是希望&#xff01; 什么是CSS? CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中 *&#xff1a;也称级联样式表。 CSS语法 在此例…

微信小程序的智慧物流平台-计算机毕业设计源码49796

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3研究方法 1.4开发技术 1.4.1 微信开发者工具 1.4.2 Node.JS框架 1.4.3 MySQL数据库 1.5论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 用户登录流程 2.2.2 数据删除流程 2.3 系统功能分…