当前位置: 首页 > news >正文

探索UniApp分包

目录

什么是UniApp分包?

UniApp分包的原理

优势

如何使用UniApp分包

1.manifest.json文件配置

2.静态图片资源分包注意事项

 3.pages.json配置

结论


 

探索UniApp分包:优化移动应用性能与用户体验

在移动应用开发领域,性能和用户体验是至关重要的因素。随着应用变得越来越复杂,为了提供流畅的用户体验,开发人员需要寻找各种方法来优化性能。其中一种强大的工具是UniApp分包技术。本文将深入探讨UniApp分包,介绍其原理、优势以及如何在您的UniApp项目中使用它来提高性能和用户体验。

什么是UniApp分包?

UniApp分包是一种将应用代码划分为多个包的技术。通常,一个UniApp项目包含了所有页面和组件的代码,这可能导致应用体积庞大,加载时间长,影响用户体验。分包技术的核心思想是将不同部分的代码划分为不同的包,按需加载,从而提高应用性能。

UniApp分包的原理

UniApp分包的原理基于微信小程序和App平台的分包机制。它使用了UniApp的条件编译功能,允许开发人员根据需要将代码划分为多个包。每个包都包含一组页面和组件,以及它们所依赖的资源文件。当用户打开应用时,只有当前页面所需的包会被下载和加载,这可以显著减少应用的启动时间和内存占用。

优势

使用UniApp分包带来了多个显著优势:

  1. 快速启动时间: 分包技术可以将应用的启动时间减少到最低限度,用户可以更快地访问应用。

  2. 减小应用体积: 分包允许您将不常用的页面和组件延迟加载,减小应用的总体积。

  3. 更好的用户体验: 减少了启动时间和内存占用,可以提供更流畅的用户体验,降低了应用卡顿的可能性。

  4. 优化资源管理: 每个包都可以有自己的资源文件,使资源管理更加灵活和高效。

如何使用UniApp分包

分包加载配置,此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。

所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。

App默认为整包。从uni-app 2.7.12+ 开始,也兼容了小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。App下开启分包,除在pages.json中配置分包规则外,还需要在manifest中设置在app端开启分包设置,详见:manifest.json 应用配置 | uni-app官网uni-app,uniCloud,serverlessicon-default.png?t=N7T8https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:

1.manifest.json文件配置

uniapp中小程序开启分包,需要在项目根目录下的manifest.json文件中开启:

"optimization" : {"subPackages" : true},

 

2.静态图片资源分包注意事项

 为了实现在分包的过程中可以把图片资源也放入各自的包中,需要对目录进行调整:分包名/static/图片资源(eg:food为分包名称,static为图片文件夹,放置分包下的所有图片,只有这样,打包编译为小程序的时候才能把图片也放入分包)

 3.pages.json配置

 

  • subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
  • 微信小程序每个分包的大小是2M,总体积一共不能超过20M。
  • 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
  • 支付宝小程序每个分包的大小是2M,总体积一共不能超过8M。
  • QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
  • 抖音小程序每个分包的大小是2M,总体积一共不能超过16M(抖音小程序基础库 1.88.0 及以上版本开始支持,抖音小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本)。
  • 快手小程序每个分包的大小是2M,总体积一共不能超过24M。
  • 分包下支持独立的 static 目录,用来对静态资源进行分包。
  • uni-app内支持对微信小程序QQ小程序百度小程序支付宝小程序抖音小程序(HBuilderX 3.0.3+)快手小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明
  • 针对vendor.js过大的情况可以使用运行时压缩代码
    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
    • cli创建的项目可以在package.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

 

pages.json配置是最重要的一步,也只有在这里面配置,分包才算真正的实现:

    1️⃣分包配置:分包文件的路径在“subPackages”中写入,而不是写入“pages”中:

2️⃣分包预加载配置:分包创建完成后,为了提高小程序加载分包的速度,可以直接指定预加载配置“preloadRule”: 

分包预载配置。

配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

 app的分包,同样支持preloadRule,但网络规则无效

结论

UniApp分包是一个强大的工具,可以显著提高移动应用的性能和用户体验。通过将应用代码划分为多个包,并按需加载,可以减小应用体积,加快启动时间,提供更好的用户体验。如果您是UniApp开发人员,不妨考虑在项目中使用分包技术,以优化您的应用并让用户更加满意。

相关文章:

探索UniApp分包

目录 什么是UniApp分包? UniApp分包的原理 优势 如何使用UniApp分包 1.manifest.json文件配置 2.静态图片资源分包注意事项 3.pages.json配置 结论 探索UniApp分包:优化移动应用性能与用户体验 在移动应用开发领域,性能和用户体验是至…...

uniapp 支持图片放大

<view class"list" v-for"(item, index) in urls" :key"index"><image :src"item" click"viewImg(item, index)" disabled></image></view> js // 预览大图 viewImg(data, index) {uni.previewImag…...

Oracle数据泵备份恢复(导出导入)详细语句

数据泵备份 查询已存在备份目录 select * from dba_directories;新建备份目录 create directory dbbak as /u01/dbbak;注意&#xff1a;在本地新建对应的物理目录 给指定用户赋权 grant read, write on directory dbbak to testuser; 或者直接把目录的权限设置为公开 g…...

【JS案例】JS实现积分抽奖(内附源码)

JS案例实现积分抽奖 &#x1f31f;效果展示 &#x1f31f;HTML结构 &#x1f31f;CSS样式 &#x1f31f;实现思路 &#x1f31f;具体实现 1.定义抽奖次数渲染 2.点击抽奖按钮,实现滚动抽奖效果 3.弹窗处理 &#x1f31f;完整代码 &#x1f31f;写在最后 &#x1f3…...

angular抛出 ExpressionChangedAfterItHasBeenCheckedError错误分析

当变更检测完成后又更改了表达式值时&#xff0c;Angular 就会抛出 ExpressionChangedAfterItHasBeenCheckedError 错误。Angular 只会在开发模式下抛出此错误。 在开发模式下&#xff0c;Angular 在每次变更检测运行后都会执行一次附加检查&#xff0c;以确保绑定没有更改。这…...

动态链接库的__declspec(dllexport)关键字的概念

在 Windows 操作系统下&#xff0c;创建一个动态链接库&#xff08;DLL&#xff09;项目时&#xff0c;您需要通过 __declspec(dllexport) 关键字来显式地标记希望在 DLL 中 公开 的函数、类、变量等符号。这是因为在默认情况下&#xff0c;编译器会将函数和符号视为 私有&…...

群晖NAS:DS Video、Jellyfin等视频电影电视剧海报、背景墙搜刮器

群晖NAS&#xff1a;DS Video、Jellyfin等视频电影电视剧海报、背景墙搜刮器 本文只使用豆瓣插件方式&#xff0c;系统默认的 The Movie Database 好注册&#xff0c;但是授权码输入后域名不通过&#xff0c;很麻烦。 1、插件地址&#xff1a; https://www.aliyundrive.com/s…...

WEBGL(3):鼠标动态绘制点

1 实现思路 绘制单个点鼠标事件监听点击事件将点推送到数组中绘制数组中所有点 2 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…...

Sass基础

Sass基础 简介 Sass是一种stylesheet语言&#xff0c;可以被编译成CSS。Sass允许你使用诸如variabels&#xff0c;nested rules&#xff0c;mixins&#xff0c;functions等等语法&#xff0c;这些都将在本篇的接下来进行讲解。 因为之前一直学的后端&#xff0c;前端只是因为…...

Java中的消息队列有哪些?

在Java中&#xff0c;有几种常见的消息队列实现&#xff0c;包括&#xff1a; Apache Kafka&#xff1a;一个分布式流处理平台&#xff0c;具有高吞吐量、可持久化、可扩展等特点。 RabbitMQ&#xff1a;一个开源的消息代理&#xff0c;实现了AMQP&#xff08;高级消息队列协议…...

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 目录 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 模型描述 M…...

测试用例编写规范参考

章节目录&#xff1a; 一、规范目的二、模块划分三、颗粒度规范四、编写规范五、具体分项5.1 用例标题5.2 前置条件5.3 操作步骤5.4 预期结果 六、用例维护七、结束语 一、规范目的 规范合理&#xff0c;可执行性。一定要保证高可读性。 二、模块划分 同级别、同等级功能点。…...

unity3d:功能验证,收集开源项目的工程合集

unity3d功能验证&#xff0c;和收集开源项目的工程合集 目录持续更新地址 【腾讯文档】UnityForTest目录 https://docs.qq.com/doc/DWm9HSkVhTGdyUUVo 源码 https://github.com/luoyikun/UnityForTest 动画 创建骨骼动画 BoneAnimation场景 代码创建Mesh&#xff0c;骨骼…...

plotly_beforehover 用法:

在Plotly.js中&#xff0c;plotly_beforehover是在鼠标悬停在数据点上之前触发的回调事件。它的主要作用是在鼠标悬停事件发生前做一些准备工作。 plotly_beforehover事件是与图表对象绑定的&#xff0c;可以通过调用on方法来绑定事件处理程序。下面是一个示例代码&#xff1a…...

利用 AI 赋能云安全,亚马逊云科技的安全技术创新服务不断赋能开发者

文章分享自亚马逊云科技 Community Builder&#xff1a;李少奕 2023年6月14日&#xff0c;一年一度的亚马逊云科技 re:Inforce 全球大会在美国安纳海姆落下了帷幕。re:Inforce 是亚马逊云科技全球最大的盛会之一&#xff0c;汇集了来自全球各地的安全专家&#xff0c;共同学习、…...

18. 填坑Ⅰ

Description 又是北湖深坑&#xff0c;惊不惊喜&#xff0c;意不意外&#xff1f;&#xff01; 觉得用水填湖太没意思了&#xff0c;用石头填坑多有意思。 假设北湖的地面还是一维的&#xff0c;每一块宽度都为1&#xff0c;高度是非负整数&#xff0c;用一个数组来表示。 现提…...

CSS 实现平面圆点绕椭圆动画

前言 &#x1f44f;CSS实现平面圆点绕椭圆动画,速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现原理 transform-style&#xff1a;CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面&#xf…...

docker login : x509: certificate signed by unknown authority

一. 背景 docker login 登录harbor镜像仓库报错. [rootmaster01 sloth]# docker login docker.harbor.master01.com Username: bigdata Password: Error response from daemon: Get https://docker.harbor.master01.com/v2/: x509: certificate signed by unknown authority …...

金蝶云星空二开,插件查看工具

可查询单据上挂载的系统原有插件、二开插件及插件类型 1.支持模糊查询单据列表 2.支持项目与账套二开插件对比 3.支持金蝶不同账套之间对比差异 操作步骤&#xff1a; 1.登陆界面&#xff0c;选择金蝶云管理中心账套登录获取账套列表&#xff1b; 2.单一标识查询&#xff1a;…...

error: ‘std::_hypot‘ has not been declared using std::hypot;

Cmake 使用qt的编译器 编译opencv时 执行mingw32-make时出现了错误 本质原因就是 _hypot 没有声明。所以找到对应的文件声明一下 就行了。 E:\*****\Qt5.14.1\Tools\mingw730_64\lib\gcc\x86_64-w64-mingw32\7.3.0\include\c 下面的math.h 文件。 可以看到这个文件有一个…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...