小程序如何进行分包详细介绍

news2024/11/24 15:26:31

微信小程序开发过程中,随着业务不断迭代,程序包的体积越来越大,使用分包加载是开发者必须面对的问题。

正常情况下,小程序首次启动时,会将整个代码包下载下来,所以如果代码包过大,会影响小程序首次启动时间,因此微信官方对小程序代码包做了大小限制。

官方介绍:pages.json 页面路由 | uni-app官网

一、为什么要使用分包?

1.减少初始加载时间:如果整个小程序页面非常庞大,包含了大量的文件和代码,那么初始加载时可能需要较长的时间。

2.优化小程序包体积:当小程序项目变得很庞大时,单个包的大小可能会超过小程序平台的限制。

3.按需更新和维护:通过将不同的功能模块或页面分离到不同的分包中,可以实现独立的更新和维护。

提示:小程序启动时,默认会下载主包并启动主包内的页面,当用户进入分包内的某个页面时,客户端会把对应的分包下载下来。

说明:合理使用分包可以较好地优化小程序的加载时间,提升用户体验。

二、分包大小查看

在微信开发工具->详情->基本信息面板中即可查看项目及分包信息,如果不采用分包,小程序总大小不能超过2MB,如果采用分包,总大小可以达到20MB,每个包不能超过2MB

 

 三、如何使用分包?

1.根目录下新建目录 subPackages 其他名字也ok

2.pages.json配置subPackages

 

 3.可以一键生成path style 在目录下新建页面

4.测试是否新建成功,分包页面成功

 

注意:在开发过程中,可以使用uni.navigateTo 或wx.navigateTowx.redirectTo等导航方法跳转到分包中的页面。需要注意的是,跨包导航时需要指定完整的路径,例如pages/subpageA/subpageA

四.打包原则

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

五.引用原则

  • packageA 无法 require packageB JS 文件,但可以 require 主包、packageA 内的 JS 文件;使用 分包异步化 时不受此条限制
  • packageA 无法 import packageB 的 template,但可以 require 主包、packageA 内的 template
  • packageA 无法使用 packageB 的资源,但可以使用主包、packageA 内的资源

六.低版本兼容

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

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

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

相关文章

【云管平台小知识】云管平台和云服务器一样吗?两者有啥区别?

对于云管平台以及云服务器,很多人都是傻傻分不清楚,有人问,云管平台和云服务器一样吗?两者有啥区别?今天我们就来简单聊聊。 一、定义不同 云管平台:是一种管理公有云、私有云和混合云的产品&#xff0c…

Github Pages使用自定义域名

Github Pages使用自定义域名 部署好网站后默认访问地址是xxx.github.io,我们想要自定义为自己的域名 1.DNS解析 这里我使用的是腾讯云,DNS解析DNSPod 添加两条解析记录: 第一个解析记录的记录类型为A,主机记录为,记录值为ping 你的github用户名.githu…

1、QT新建工程

本章内容:本章建立一个简单的QT工程,并且对工程目录进行重新管理,再进行windows端打包部署,方便开发 一、建立工程 创建windows UI应用程序工程 到此,工程就已经建立完毕能正常运行了… 二、工程目录重新管…

canvas的用法,使用vue3和canvas画一个树

一,canvas简介 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 详情点击链接,前去菜鸟教程或者…

牛客网最新版 Java 面试题大全带答案 1100 多题(限时分享)

面试题就好像科举考试时代背的八股文,是知识改变命运的代表作。你不刷,不管是校招还是社招,就很过这一关。面试前还是很有必要针对性的刷一些题,很多朋友的实战能力很强,但是理论比较薄弱,面试前不做准备是…

MySQL数据备份与还原、索引、视图

一.备份与还原 /***************************样例表***************************/ CREATE DATABASE booksDB; use booksDB; CREATE TABLE books ( bk_id INT NOT NULL PRIMARY KEY, bk_title VARCHAR(50) NOT NULL, copyright YEAR NOT NULL …

Unity2019_寻路系统

简单导航寻路功能 选定为静态网格导航 Windows>Ai>Navigation,点击烘焙 角色上挂一个导航网格组件 挂上脚本,鼠标点击位置设置为导航的终点 using UnityEngine; using UnityEngine.AI;public class PalyerMovement : MonoBehaviour {private Nav…

Mysql——》数据目录

推荐链接: 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

vue3 KeepAlive实操

一.相关文档 KeepAlive 官方文档Vue Router 文档Pinia 文档 二.需求 首页->列表 —不缓存列表列表->详情 —缓存列表详情->列表 — 恢复列表缓存 三.代码如下 1.定义pinia export const useStore defineStore(store, {state: () > ({cachedList: [] //缓存白…

校园课表微信小程序全栈项目

遇到的第一个问题关于npm start 首先找到对应的后端项目 crtl shift (esc键下的波浪号) 召唤终端 Error:Cannot find module dotenv 解决问题: npm install dotenv 简写 npm i dotenv 然后遇到第二个问题 Port 3000 is already in use 我的3000接口被占用 那就要去检…

【直到用了Tabby这款开源好用的终端工具,直接和Xshell、Putty、FinalShell告别】

🚀 AI破局先行者 🚀 🌲 AI工具、AI绘图、AI专栏 🍀 🌲 如果你想学到最前沿、最火爆的技术,赶快加入吧✨ 🌲 作者简介:硕风和炜,CSDN-Java领域优质创作者🏆&am…

红队攻击:初始访问

聆听你的声音 如果你有独到的想法和建议,欢迎私信与我一同分享! 公众号:安全攻防渗透 0x01 windows-多账户同时登陆 描述 攻击者可能会获取并滥用本地帐户的凭据,以获取初始访问权限,持久性,权限提升或…

未设置Strict-Transport-Security响应头【原理扫描】

IIS环境检测到网站存在响应头缺失漏洞解决办法: 1.webconfig中添加响应头 <?xml version"1.0" encoding"UTF-8"?> <configuration><system.webServer><directoryBrowse enabled"false" /><httpProtocol><cu…

Elasticsearch 8.8.1安装及启动

华为云的镜像去下载 ElasticSearch: https://mirrors.huaweicloud.com/elasticsearch/?CN&OD logstash: https://mirrors.huaweicloud.com/logstash/?CN&OD kibana: https://mirrors.huaweicloud.com/kibana/?CN&OD 原文链接&#xff1a;https://blog.csdn.ne…

AI加速财务智能化,实在智能、优贲财税、楚云科技共探数字员工新未来

作为财务发展的最新前沿&#xff0c;智能财务正在逐步渗入日常工作中&#xff0c;加快企业数字化转型步伐&#xff0c;促进我国财务信息化建设的快速发展。在当前形势下&#xff0c;企业应如何进行数字化转型以重塑业务、财务和税务等关系&#xff0c;形成管理闭环&#xff0c;…

注解和反射03(Java)

#拓展开题&#xff1a; 类的加载与ClassLoader的理解 什么时候会发生类初始化&#xff1f; 类加载器的作用 动态创建对象执行方法 有了Class对象&#xff0c;能做什么&#xff1f; newInstance()是一个Java中使用反射创建对象实例的方法&#xff0c;通过该方法可以获取类的构…

智能物流监控系统的数据平台技术研究

完整资料进入【数字空间】查看——baidu搜索"writebug" 1.1 项目背景 物联网技术是利用传感器嵌入各种末端设备&#xff0c;通过无线或有线网络接入互联网以实现人与物、物与物实时互联的新兴技术[1]。 智能物流监控系统是在物流量越来越大、物流价值越来越贵重的背…

【Distributed】zookeeper+kafka的应用及部署

文章目录 一、zookeeper1. zookeeper的概述1.1 Zookeeper 定义1.2 Zookeeper 工作机制1.3 Zookeeper 特点1.4 Zookeeper 数据结构1.5 Zookeeper 应用场景1.6 Zookeeper 选举机制第一次启动选举机制非第一次启动选举机制选举Leader规则 2. 部署 Zookeeper 集群2.1 安装前准备2.2…

MySQL数据库表数据的基本操作

目录 1.创建表 2.插入数据 3.修改表数据 3.1、将所有员工薪水修改为5000元 ​3.2、将姓名为张三的员工薪水修改为3000元 ​3.3、将姓名为李四的员工薪水修改为4000元gender改为女 ​3.4、将王五的薪水在原有基础上增加1000元 4、MySQL字符集 1.创建表 创建员工表emplo…

【技巧】Latex在线工具:公式编辑器、表格编辑器

找到什么再补充 目录 表格编辑器 公式编辑器 表格编辑器 https://www.tablesgenerator.com/ 公式编辑器 https://www.latexlive.com/