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

一、小程序分包加载

小程序的代码通常是由许多页面、组件以及资源等组成,随着小程序功能的增加,代码量也会逐渐增加,
体积过大就会导致用户打开速度变慢,影响用户的使用体验。分包加载是一种小程序优化技术。将小程序不同功能的代码,分别打包成不同的子包,在构建时打包成不同
的分包,用户在使用时按需进行加载在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包主包:包含默认启动页面、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.mzph.cn/pingmian/41153.shtml

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

相关文章

【微信小程序开发实战项目】——花店微信小程序实战项目(4)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Nginx的安装与配置 —— Linux系统

一、Nginx 简介 1.1 什么是 Nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;在BSD-like 协议下发行。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务…

Linux系统部署MongoDB开源文档型数据库并实现无公网IP远程访问

文章目录 前言1. 安装Docker2. 使用Docker拉取MongoDB镜像3. 创建并启动MongoDB容器4. 本地连接测试5. 公网远程访问本地MongoDB容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&am…

现代农业利器:土壤检测仪器的应用与未来

在现代农业发展的浪潮中&#xff0c;土壤检测仪器以其精准、高效的特点&#xff0c;成为了农业生产的得力助手。这些看似不起眼的设备&#xff0c;实际上在保障农产品质量、提高农业生产效率方面发挥着举足轻重的作用。 一、土壤检测仪器&#xff1a;现代农业的“眼睛” 土壤检…

记录第一次写脚本

使用csh语言&#xff0c;Linux系统操作的 写和执行csh&#xff08;C Shell&#xff09;脚本不需要额外的软件&#xff0c;只需要一个支持csh的终端环境。 1.检查是否安装了C Shell 在终端terminal运行以下命令 which csh 如果返回路径&#xff0c;比如/bin/csh&#xff0c…

SpringBoot 启动流程六

SpringBoot启动流程六 这句话是创建一个上下文对象 就是最终返回的那个上下文 我们这个creatApplicationContext方法 是调用的这个方法 传入一个类型 我们通过打断点的方式 就可以看到context里面的东西 加载容器对象 当我们把依赖改成starter-web时 这个容器对象会进行…

STM32-HAL-FATFS(文件系统)(没做完,stm32f103zet6(有大佬的可以在评论区说一下次板子为什么挂载失败了))

1STM32Cube配置 1-1配置时钟 1-2配置调试端口 1-3配置uart 1-4配置SDIO&#xff08;注意参数&#xff09;&#xff08;其中他的初始化的异常函数给注释&#xff0c;SD卡文件写了&#xff09; 配置了还要打开中断和DMA可在我的其他文章中看一样的 1-5配置FatFs (只改了图选中…

QT c++函数模板与类模板的使用

QT c类模板的使用 #pragma once#include <QtWidgets/QMainWindow> #include "ui_QtWidgetsApplication5.h"class QtWidgetsApplication5 : public QMainWindow {Q_OBJECTpublic:QtWidgetsApplication5(QWidget *parent nullptr);~QtWidgetsApplication5();te…

Arthas实战(4)- 线程死锁问题排查

一、 准备测试应用 新建一个 SpringBoot应用&#xff0c;写一段线程死锁的代码&#xff1a; GetMapping("/threadLock") public void threadLock() {Thread thread1 new Thread(() -> {synchronized (resource1) {System.out.println(Thread.currentThread().g…

Solution

(解决方案)可行性研究报告暨设计方案-zengwenfeng.doc 基本上都要300-500多页&#xff0c;大型【纯软件】&#xff0c;县级0-200万&#xff0c;市级项目500-1500万不等&#xff0c;省部级1000-10000万不等都有。本例为过往已完成项目案例目录结构。搞方案都要准备1-3个月呢。所…

房屋租赁管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;中介管理&#xff0c;房屋信息管理&#xff0c;房屋类型管理&#xff0c;租房订单管理&#xff0c;租房信息管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;房屋信息&a…

极狐GitLab 将亮相2024空天信息大会暨数字地球生态峰会,携手中科星图赋能空天行业开发者

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

Django文档简化版——Django快速入门——创建一个基本的投票应用程序

Django快速入门——创建一个基本的投票应用程序 准备工作1、创建虚拟环境2、安装django 1、请求和响应&#xff08;1&#xff09;创建项目&#xff08;2&#xff09;用于开发的简易服务器&#xff08;3&#xff09;创建投票应用&#xff08;4&#xff09;编写第一个视图1、编写…

Qualcomm QCA206x EasyMesh For Ubuntu

1. 引言 关于EasyMesh概念我们这里就不再过多的赘述&#xff0c;此篇文档的目的是&#xff0c;让广大初学者&#xff0c;有一个很方便的平台进行EasyMesh的学习和测试。 2. X86 Ubuntu平台 2.1 硬件环境准备 备注&#xff1a;QCA206x WiFi module推荐使用移远的FC64E/FC66E。…

Mysql笔记-v2【7月5日更新】

零、 help、\h、? 调出帮助 mysql> \hFor information about MySQL products and services, visit:http://www.mysql.com/ For developer information, including the MySQL Reference Manual, visit:http://dev.mysql.com/ To buy MySQL Enterprise support, training, …

详解yolov5的网络结构

转载自文章 网络结构图&#xff08;简易版和详细版&#xff09; 此图是博主的老师&#xff0c;杜老师的图 网络框架介绍 前言&#xff1a; YOLOv5是一种基于轻量级卷积神经网络&#xff08;CNN&#xff09;的目标检测算法&#xff0c;整体可以分为三个部分&#xff0c; ba…

第十节:学习ConfigurationProperties类来配置pojo实体类参数(自学Spring boot 3.x的第二天)

大家好&#xff0c;我是网创有方 。这节记录下如何使用ConfigurationProperties来实现自动注入配置值。。实现将配置文件里的application.properties的参数赋值给实体类并且打印出来。 第一步&#xff1a;新建一个实体类WechatConfig package cn.wcyf.wcai.config;import org…

GISSERVER 管理器如何发布自定义地图网站

GISSERVER 管理器可以发布我们自己的地图网站&#xff0c;那么如何通过编程或自动生成的方式生成一个地图页面并将其用GISSERVER 管理器发布出来呢&#xff1f;在看本章之前希望您能了解一下WEBGIS的基本架构情况&#xff0c;对您理解本章内容及WEBGIS基本原理很有帮助&#xf…

java花店管理系统eclipse开发mysql数据库

1 绪论 1.1 系统开发目的 随着人们物质生活水平和经济水平的不断提高&#xff0c;室内绿化布置、家庭园艺装饰、礼仪鲜花等日益受到重视和青睐&#xff0c;以及送鲜花给亲朋好友来表达自己的情谊。传统的花店对于信息的管理的主要方式是基于文本、表格等纸质手工处理&#xf…

React Native 和 Flutter 的开发对比

React Native (RN) 和 Flutter 都是用于构建跨平台移动应用程序的流行框架。两者都具有各自的优势和劣势&#xff0c;选择哪个框架取决于您的具体需求和项目。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 以下是一些 RN 和 Flutter…