小程序分包看完这一篇秒懂

前言

在小程序开发中,分包是一种优化加载时间和用户体验的方法。通过将小程序拆分成多个包,可以按需加载,从而减少首次加载时间。很多刚涉及小程序开发的小伙伴对小程序分包都相对茫然或者头疼。也不知道该合适进行分包,怎么进行分包。其实分包并没有那么难。耐心的看下去,我相信你们看完后会豁然开朗。下面是一些关于小程序分包的基本知识和代码示例(这里以uniapp为例进行演示,微信小程序和uniapp差不多)。

主包配置(正常的tabBar页面)

以下为未配置分包时的pages.json文件

pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages

{"pages": [{"path": "pages/index/index"},{"path": "pages/news/news","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path": "pages/member/member","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}},],"globalStyle": {...},"uniIdRouter": {...},"tabBar": {"selectedColor": "#b50e03","color": "#ccc","list": [{"iconPath": "static/icon/home.png","pagePath": "pages/index/index","selectedIconPath": "static/icon/home-active.png","text": "首页"},{"iconPath": "static/icon/news.png","pagePath": "pages/news/news","selectedIconPath": "static/icon/news-active.png","text": "资讯"},{"iconPath": "static/icon/cart.png","pagePath": "pages/cart/cart","selectedIconPath": "static/icon/cart-active.png","text": "购物车"},{"iconPath": "static/icon/member.png","pagePath": "pages/member/member","selectedIconPath": "static/icon/member-active.png","text": "会员"}]}
}

 分包配置

创建一个subPackPages文件夹,用以存储分包的页面

有的公司是把分包的文件夹放在pages下面,有的是放在根路径下面,我们这里就放在根路径下面进行演示吧~

subPackages配置

pages.json

在 pages.json 文件中,通过 subpackages 字段来配置分包。(微信小程序里是app.json文件)

以下为配置好分包时的文件,subPackages里每一个对象都是一个独立的分包

{"pages": [...],"globalStyle": {...},"uniIdRouter": {...},"tabBar": {...},// 分包加载配置,此配置为小程序的分包加载机制。"subPackages": [{"root": "subPackPages",//子包的根目录"pages": [{//这里的配置路径和pages里的一样//配置页面路径,这里要注意,因为root已经选中了文件夹,所以我们只要填写文件名就好"path": "contact","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path": "pics","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}]}]
}

分包预加载

分包配置好后,我们一般情况下还需要配置分包预加载处理

 我们通过preloadRule这个字段来配置分包预加载规则

{"pages": [...],"globalStyle": {...},"uniIdRouter": {...},"tabBar": {...},// 分包加载配置,此配置为小程序的分包加载机制。"subPackages": [...],// 分包预载配置"preloadRule": {// 当我们进入了pages/index/index页面以后就会预下载pages/subPack分包"pages/index/index": {"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)"packages": ["subPackPages"] //进入页面后预下载分包}}
}

 分包加载

在分包加载时,需要使用 uni.navigateTo 或 uni.redirectTo 等跳转方法,指定分包路径。

微信小程序里是wx.navigateTo或者wx.redirectTo

uni.navigateTo({url: '/subPackPages/pages/contact'
});

独立分包

(可先做了解,用到的时候再深入看。不感兴趣的可暂时先跳过)

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

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

在 uni-app 中,可以通过在 manifest.json 文件中配置 mp-weixin 字段下的 independent 属性来启用独立分包。

"mp-weixin": {"independent": true
}

在 pages.json 文件中,将需要作为独立分包的页面配置在 subPackages 字段下。

"subPackages": [{"root": "pagesA","pages": ["pages/index/index","pages/detail/detail"],"independent": true}
]

在微信小程序里,开发者通过在app.jsonsubpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{"pages": ["pages/index","pages/logs"],"subpackages": [{"root": "moduleA","pages": ["pages/rabbit","pages/squirrel"]}, {"root": "moduleB","pages": ["pages/pear","pages/pineapple"],"independent": true}]
}

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

此外,使用独立分包时要注意:

  • 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、template、wxss、自定义组件、插件等(使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制)
  • 主包中的 app.wxss 对独立分包无效,应避免在独立分包页面中使用 app.wxss 中的样式;
  • App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为;
  • 独立分包中暂时不支持使用插件。

详细限制,请看:独立分包 | 微信开放文档

分包配置到这里就结束了,那么你学会了嘛?

拓展

小程序为什么要分包

小程序分包的主要目的是为了优化小程序的加载速度和用户体验。

小程序默认是主包下载,如果不进行分包,会导致所有文件加载完毕后才会进入小程序。首次加载时间过长,极度影响用户体验感,会加剧用户的流失。

其次小程序官方对小程序项目打包后的大小限制也是有要求的。如果不分包,真个小程序最大限制不能超过2M。但是分包以后,整个小程序最大限制是不能超过16M。这里需要注意的是,分包后,单个包不能超过2M(无论主包还是分包)。这样我们就通过分包规避了项目不能超过2M的限制。

具体来说,分包有以下优点:

  1. 减少首次加载时间:通过将小程序拆分成多个包,可以按需加载,从而减少首次加载时间。用户只需要下载启动所需的包,而不需要一次性下载整个小程序的所有代码。

  2. 提升性能:分包可以减少单个包的大小,从而提升小程序的性能。这对于大型小程序尤其重要,因为它们可能包含大量的代码和资源。

  3. 优化用户体验:分包可以更好地组织和管理小程序的代码和资源,使得小程序的结构更加清晰。用户可以根据自己的需求选择加载不同的包,从而提升用户体验。

  4. 支持分包预加载:通过配置 preloadRule 字段,可以实现在用户需要访问某个分包时,提前加载该分包,从而进一步提升用户体验。

  5. 支持独立分包:小程序支持独立分包,即用户可以直接打开独立分包中的页面,而不需要先打开主包。这对于一些需要快速访问的小程序页面非常有用。

 总的来说,分包是一种优化小程序加载速度和用户体验的有效方法。通过合理地使用分包,可以提升小程序的性能和可维护性。

分包原则

通俗点,tabBar 页面必须在主包里面,和多个页面关联的页面也应放在主包里,其他使用频率低的页面都可以放到分包里。以下是一些常见的分包时机:

  1. 项目较大:如果你的项目包含大量的页面和功能,可以考虑进行分包。这样可以减少首次加载时间,提升用户体验。

  2. 功能模块独立:如果你的项目包含多个功能模块,并且这些模块相对独立,可以考虑将它们分别放在不同的分包中。这样,用户在访问某个模块时,只需要下载该模块的包,而不需要下载整个小程序的所有代码。

  3. 网络环境较差:如果你的目标用户网络环境较差,可以考虑进行分包。这样可以减少下载时间和流量消耗,提升用户体验。

  4. 页面访问频率较低:如果你的项目包含一些访问频率较低的页面,可以考虑将这些页面放在分包中。这样,用户在访问这些页面时,只需要下载该页面的包,而不需要下载整个小程序的所有代码。

  5. 需要独立发布:如果你的项目包含一些需要独立发布的功能模块,可以考虑将这些模块放在独立分包中。这样,用户可以直接打开独立分包中的页面,而不需要先打开主包。

 需要注意的是,分包并不是万能的,过度拆分也会导致管理复杂度增加。因此,应该根据实际需求,合理地划分分包。

为什么要分包预加载

分包预加载是一种优化小程序加载速度和用户体验的技术。具体来说,分包预加载有以下优点:

  1. 减少加载时间:通过预加载分包,可以在用户需要访问某个分包时,提前加载该分包,从而减少加载时间。这对于提升用户体验非常重要。

  2. 提升性能:分包预加载可以减少小程序的启动时间,提升小程序的性能。这对于大型小程序尤其重要,因为它们可能包含大量的代码和资源。

  3. 优化用户体验:分包预加载可以更好地组织和管理小程序的代码和资源,使得小程序的结构更加清晰。用户可以根据自己的需求选择加载不同的包,从而提升用户体验。

  4. 支持独立分包:小程序支持独立分包,即用户可以直接打开独立分包中的页面,而不需要先打开主包。这对于一些需要快速访问的小程序页面非常有用。

总的来说,分包预加载是一种优化小程序加载速度和用户体验的有效方法。通过合理地使用分包预加载,可以提升小程序的性能和可维护性。 

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

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

相关文章

第02章 MySQL环境搭建

一、MySQL的卸载 如果安装mysql时出现问题,则需要将mysql卸载干净再重新安装。如果卸载不干净,仍然会报错安装不成功。 步骤1:停止MySQL服务 在卸载之前,先停止MySQL8.0的服务。按键盘上的“Ctrl Alt Delete”组合键&#xff0…

1.探索WebSocket:实时网络的心跳!

序言 你可能听说过"WebSokcet"这个词,感觉它好像很高深,但其实它是一个超级酷的小工具,让我们在Web应用里实现实时通信。想象一下,你可以像聊天一样,在浏览器和服务器之间来回“畅聊“,没有延迟…

Qt6 CMake 中引入 Qt Linguist 翻译功能

qt cmake 使用自带翻译工具配置步骤 创建Qt CMake 程序大体流程配置项目 CMake 及 代码使用流程最终CMake 如下最终工程链接为:参考 创建Qt CMake 程序 大体流程 配置项目 CMake 及 代码 在CMake 中添加如下代码, 导入相关的翻译库 find_package(QT NAMES Qt6 Qt…

【Linux】——如何安装g++

g的安装 sudo yum install -y gcc-c

FET113i-S核心板已支持RISC-V,打造国产化降本的更优解 -飞凌嵌入式

FET113i-S核心板是飞凌嵌入式基于全志T113-i处理器设计的国产工业级核心板,凭借卓越的稳定性和超高性价比,FET113i-S核心板得到了客户朋友们的广泛关注。作为一款拥有A7核RISC-V核DSP核的多核异构架构芯片,全志科技于近期释放了T113-i的RISC-…

基于python的机器学习(二)—— 使用Scikit-learn库

目录 一、样本及样本划分 1.1 划分样本的方法 1.1.1 train_test_split()函数 1.1.2 时间序列划分 1.1.3 交叉验证 二、导入或创建数据集 2.1 导入Sklearn自带的样本数据集 2.2 利用Sklearn生成随机的数据集 2.3 读入自己创建的数据集 2.3.1 用Python直接读取文本文件…

【LQB15_模拟】C风险对冲

Description 小蓝所在的蓝星集团即将建立执行一个重要的项目,在建立项目的时候需要考虑执行这个项目对集团的风险。他们组有三个备选方案,方案A的风险评估值为a,方案B的风险评估值为b,方案C的风险评估值为c。方案风险评估值越低&…

第二十八章 Vue之自定义指令

目录 一、引言 二、自定义指令的注册和使用方式 2.1. 自定义指令-全局注册使用 2.2. 自定义指令-局部注册使用 三、自定义指令完整代码 3.1. 自定义指令全局注册/使用 3.1.1. main.js 3.1.2. App.vue 3.2. 自定义指令局部注册/使用 3.2.1. main.js 3.2.2. App.vue …

银行信贷知识竞赛活动策划方案

为了落实20xx年省分行工作会议精神,进一步加强信贷队伍建设,普及和强化员工对信贷业务知识的掌握和运用,提高信贷从业人员素质,推动全省农行20xx年员工成长计划实施,实现我行全面提升信贷管理水平,促使信贷…

【学术论文投稿】探索嵌入式硬件设计:揭秘智能设备的心脏

【IEEE出版】第六届国际科技创新学术交流大会暨通信、信息系统与软件工程学术会议(CISSE 2024)_艾思科蓝_学术一站式服务平台 更多学术会议论文投稿请看:https://ais.cn/u/nuyAF3 目录 引言 嵌入式系统简介 嵌入式硬件设计的组成部分 设…

谷歌浏览器报“喔唷,崩溃啦!”怎么办?

表现 Chrome浏览器所有页面崩溃,“喔唷,崩溃啦!( STATUS_INVALID_IMAGE_HASH )” 原因 Google 在79版本(2019年12月20号左右)的更新中又重新启用了Renderer Code Integrity Protection(渲染器代码完整性保…

双因子认证(Two-factor authentication)简介

一、核心概念 双因子认证(Two-Factor Authentication,简称2FA)是一种身份验证机制,它要求用户提供两种不同类型的证据来证明自己的身份,通常包括用户所知道的(如密码)、用户所拥有的&#xff0…

vue3项目中实现el-table分批渲染表格

开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题&#xff0c;在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后&#xff0c;最后决定使用分批渲染来解决该问题。 代码实现 表格代码 <el-table :data"currTableData"borderstyle"wi…

11.Three.js使用indexeddb前端缓存模型优化前端加载效率

11.Three.js使用indexeddb前端缓存模型优化前端加载效率 1.简述 在使用Three.js做数字孪生应用场景时&#xff0c;我们常常需要用到大量模型或数据。在访问我们的数字孪生应用时&#xff0c;每次刷新都需要从web端进行请求大量的模型数据或其他渲染数据等等&#xff0c;会极大…

【HarmonyOS】引导用户跳转APP设置详情页开启权限

【HarmonyOS】引导用户跳转设置APP详情页开启权限 前言 众所周知在鸿蒙应用中&#xff0c;向用户申请权限时&#xff0c;会弹出系统请求授权的弹框。当用户拒绝了你申请的权限&#xff0c;弹框会直接关闭。当下次触发同样的权限申请&#xff0c;会直接返回失败&#xff0c;不…

深入理解Transformer中的位置编码

1 位置编码的作用 由于注意力的作用机制&#xff0c;不论输入序列的顺序如何&#xff0c;输出结果都是一样的。 也就是丢失了位置信息。 但是对于语言模型&#xff0c; 我们都知道顺序是很重要的&#xff0c; 所以需要对输入序列额外注入位置信息。 2 位置编码方式 Transfor…

MySQL分区表(二)

说明&#xff1a;之前有写过一篇博客&#xff0c;介绍MySQL如何建立分区表&#xff0c;本文介绍如何建立子分区表。子分区&#xff0c;就是在原来分区的基础上&#xff0c;再嵌套一个分区。 例如&#xff0c;按照记录的创建时间分区&#xff0c;在此基础上&#xff0c;再按照租…

一文弄懂Bert模型

01 引言 计算机一直难以理解语言&#xff0c;其中一个重要原因就是该任务需要更基本的语言语境。每个 NLP 任务都可以通过使用为每个任务创建的单独模型来解决。 2018 年&#xff0c;谷歌发布了论文BERT&#xff0c;旨在对模型进行预训练&#xff0c;这样就可以通过增加不同…

HTML5实现小鸟过管道小游戏源码

文章目录 1.设计来源1.1 主界面1.2 游戏中主界面1.3 游戏结束界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/…

Linux·进程控制(system V)

1. 共享内存 system V共享内存是最快的IPC形式&#xff0c;之前的管道是基于Linux内核开发的通讯方案&#xff0c;其读写接口都是现成的&#xff0c;因此内核设计者为了完成进程间通讯任务并不需要新增太多代码。而共享内存属于system V标准&#xff0c;是操作系统单独…