探索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开发人员,不妨考虑在项目中使用分包技术,以优化您的应用并让用户更加满意。

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

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

相关文章

Linux测开常用命令总结

文章目录 Linux系统中文件目录树 基本指令的使用: Linux命令的帮助信息查看 --help command --help 说明: 显示command 命令的帮助信息通过man命令查看帮助信息 man command( 命令的名称) man 命令查看的帮助信息更加详细ls,pwd&#xff0c…

多应用模式下,忽略项目的入口文件,重写Apache规则

多应用模式下,忽略项目的入口文件,重写Apache规则 首先,我的项目是具有两个应用,admin和index,同时给它们绑定了域名,但是每次访问时都需要加入项目的入口文件地址 index.php ,为了忽略这个入口文件,只能通…

leetcode236. 二叉树的最近公共祖先(java)

二叉树的最近公共祖先 题目描述递归法代码演示 上期经典 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个节点 p、q,最近公共祖先表示为一个节点 x,满足 x 是 p、q …

良品铺子聚焦高品质,打造零食王国

出品| 大力财经 文 | 魏力 8月29日,休闲食品企业良品铺子发布2023年半年报显示,实现营业收入39.87亿元,归母净利润1.89亿元。 值得注意的是,在全球经济增速不强的背景下,良品铺子上半年,新开店323家&#…

Ubuntu 18.04上无法播放MP4格式视频解决办法

ubuntu18.04系统无法播放MP4格式视频,提示如下图所示: 解决办法: 1、首先,确保ubuntu系统已完全更新。可使用以下命令更新软件包列表:sudo apt update,然后使用以下命令升级所有已安装的软件包&#xff1a…

【SQL应知应会】索引 • Oracle版:B-树索引;位图索引;函数索引;单列与复合索引;分区索引

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 本文免费学习,自发文起3天后,会收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习,有基础也有进阶,有MySQL也有Oracle …

深入剖析 Golang 程序启动原理 - 从 ELF 入口点到GMP初始化到执行 main!

大家好,我是飞哥! 在过去的开发工作中,大家都是通过创建进程或者线程来工作的。Linux进程是如何创建出来的? 、聊聊Linux中线程和进程的联系与区别! 和你的新进程是如何被内核调度执行到的? 这几篇文章就是…

K 次取反后最大化的数组和【贪心算法】

1005 . K 次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k ,按以下方法修改该数组: 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后,返回数组 可能…

打击儿童性虐待,遭多家机构反对,苹果宣布停止开发CSAM检测计划

据报道,苹果公司曾计划在其iCloud云服务中引入一项儿童性虐待资料(CSAM)检测计划,但由于反对声浪日益高涨,该计划最终宣布停止开发。CSAM检测计划的原本目的是为了帮助阻止儿童性虐待资料的传播,保护儿童的…

Go操作各大消息队列教程(RabbitMQ、Kafka)

Go操作各大消息队列教程 1 RabbitMQ 1.1 概念 ①基本名词 当前市面上mq的产品很多,比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 Broker:表示消息队列服务实体Virtual Host&#x…

关于购买AirPods,现在是否为最佳时机?

我们不需要解释你为什么想要AirPods。苹果对真正的无线耳机的采用彻底改变了市场,并从那时起大量销售。你总是在记者、同事和名人的耳朵里看到它们——尤其是在我们这个远程工作和Zoom会议的时代。 真正的问题是,你应该现在就买一个,还是在几…

MySQL索引,事务和存储引擎

一、索引 1、索引的概念 ●索引是一个排序的列表,在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址(类似于C语言的链表通过指针指向数据记录的内存地址)。 ●使用索引后可以不用扫描全表来定位某行的数据,而是先…

博流RISC-V芯片Eclipse环境搭建

文章目录 1、下载 Eclipse2、导入 bouffalo_sdk3、编译4、烧录5、使用ninja编译 之前编译是通过 VSCode 编译,通过手工输入 make 命令编译,我们也可以通过 Eclipse 可视化 IDE 来编译、烧录。 1、下载 Eclipse 至 Eclipse 官网 https://www.eclipse.org…

IntelliJ IDEA 2023.2.1 Android开发变化

IntelliJ IDEA 2023.2.1之前的版本,Empty Activity是指Empty View Activity,而现在Empty Activity是指Empty Compose Activity,另外多了一个Empty View Activity的选项 这表明官方推荐使用Compose这种声明式的编程方式来描述UI,命…

springboot上线打包+vuecli2部署在linux服务器上(打包上线)

这里也是记录一下springboot的上线打包流程,我这里前端使用的是vuecli2 springboot的依赖是2.7.9的版本 前端是使用的vue2 打包前,你的linux上必须要先安装,tomcat\java\nginx springboot打包 springboot打包点击一下,等maven编译打包成功在target文件下找到,jar包, 然后,把j…

C语言:指针的运算

一、指针 或 - 整数 指针 或 - 整数表示指针跳过几个字节(具体跳过几个字节由指针类型决定) 本文不做具体讲解,详解跳转链接: 《C语言:指针类型的意义》 二、指针 - 指针 前提条件:指针类型相同并且指向同…

[学习笔记]斜率优化dp 总结

前言: 我们学过不少优化类的算法了,大部分都是基于凸函数的性质给出的优化,比如Slope Trick,Wqs二分,又比如今天的斜率优化(不知道什么时候会有空把Slope Trick写掉) 正文: 我们考…

应用案例 | 基于三维机器视觉的机器人麻袋拆垛应用解决方案

​Part.1 项目背景 在现代物流和制造行业中,麻袋的拆垛操作是一个重要且频繁的任务。传统的麻袋拆垛工作通常由人工完成,分拣效率较低,人力成本较高,现场麻袋堆叠、变形严重,垛型不规则、不固定,严重影响分…

拓世科技集团 | “书剑人生”李步云学术思想研讨会暨李步云先生九十华诞志庆

2023年,中国改革开放迎来了45周年,改革春风浩荡,席卷神州大地,45年间,中国特色社会主义伟大事业大步迈入崭新境界,一路上结出了饶为丰硕的果实。中华民族在这45年间的砥砺前行,不仅使中国的经济…

解决uniapp下拉框 内容被覆盖的问题

1. 下拉框 内容被覆盖的问题 场景: 现在是下拉框被表格覆盖了 解决办法: 在表格上添加css 样式来解决这个问题 .add-table{display: static;overflow: visible; } display: static: 将元素会按照默认的布局方式进行显示,不会分为块状或行内元素。 overflow: vi…