uniapp分包优化,包括分包路由跳转规则

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。以达到优化小程序响应速度的目的。
可以看微信官方给的解释:小程序性能优化指南 | 微信开放社区

小程序官方文档: 分包加载 | 微信开放文档

uniapp 分包文档:pages.json 页面路由 | uni-app官网 

一:分包相关概念

本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术。主包与分包的概念

1). 主包:本项目中初始化时所必须的页面。

2). 分包:除主包外的所有页面都应放置在分包内,为避免读者混淆,本文会将该分包定义为子包

项目在启动时,将从主包进入,分包在用户未进入时不会加载,只有在进入分包模块时才会加载。
tabbar页面以及模块间共有的页面,如果该项目有账号限制(即非注册账号不可进入主界面),也应将登录页放置在主包内。 

二:为什么要分包

1. 优化小程序首次启动多个消灾时间
2. 方便团队开发,解耦协作

优化项目首次启动的下载时间;小程序默认就是整包(主包)下载,但这会导致整个项目只有在全部加载完毕后才会回显到用户眼前,这样虽然可以使用加载动画进行优化,但也会有部分可能导致用户流失;
防止项目超出小程序官方对小程序项目打包后的大小限制;
若不分包,整个程序最大限制不能超过2M,分包后,整个项目(包含主包+子包)最大不能超过16M,单个包不能超过2M (这样就规避了项目最大不得超过2m的限制)

 

三: 分包基本逻辑

静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用

js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)

自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息

四: 分包规则

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。体积限制
1. 整个小程序所有分包大小不超过20M(主包+所有分包)
2. 单个分包/主包大小不能超过2M

五、分包的方法

1. 假如分包后的目录结构
    ├── pages       // 主包
    │   ├── index
    │   └── logs
    ├── packageA        // 分包A
    │   └── pages
    │       ├── cat
    │       └── dog
    ├── packageB        // 分包B
    │   └── pages
    │       ├── apple
    │       └── banana
    ├── manifest.json       // 配置项
    └── pages.json      // 页面路径

2. 配置manifest.json

"mp-weixin":{"optimization":{"subPackages":true // 开启分包优化}
}

3. 配置pages.json

在pages.json中新建"subPackages"数组,"preloadRule"对象

1. "subPackages"数组中包含两个参数:
    1.root:为子包的根目录
    2.pages:子包由哪些页面组成,参数同pages
注意:主包和分包是不能在同一目录下,所以在构建项目时,要考虑目录结构,以便后期进行分包

2. "preloadRule"中,key 是页面路径,value 是进入此页面的预下载配置
    1. network指定网络下预下载可选wifi/all(非必填)
    2. packages进入也买你后预下载的分包(必填)

{"pages": ["pages/index"],   // 主包内页面"subpackages": [{"root": "packageA",    // 分包A"pages": [{"path" : "pages/cat"},{"path" : "pages/dog"}]},{"root": "packageB", // 分包B"pages": [{"path" : "pages/apple"},{"path" : "pages/banana"}]}],"preloadRule": {    // 分包预载配置 "pages/index": {    // 在进入小程序pages/index页面时,由框架自动预下载分包A、分包B"network": "all","packages": ["packageA","packageB"]}}
}

如果分包预加载配置成功,会在开发者工具控制台输出以下内容: 

 

六、分包路由跳转

在 app.vue 中,你可以使用 uni.navigateTo 或 uni.redirectTo 方法来跳转到分包页面
假设你的分包名为 subpackage,分包中有一个页面 subpackage/pages/index/index.vue,你可以使用以下代码实现跳转:

    uni.navigateTo({url: '/subUsers/pages/login/index',})uni.redirectTo({url: '/subUsers/pages/login/index',})

 

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

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

相关文章

Docker Swarm总结+service创建和部署、overlay网络以及Raft算法(2/3)

博主介绍:Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 🍅文末获取源码下载地址🍅 👇🏻 精彩专栏推荐订阅👇🏻…

【开源】基于JAVA的在线课程教学系统

项目编号: S 014 ,文末获取源码。 \color{red}{项目编号:S014,文末获取源码。} 项目编号:S014,文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

Android 提示框代码 java语言

在Android中,你可以使用 AlertDialog 类来创建提示框。以下是一个简单的Java代码示例,演示如何创建和显示一个基本的提示框: import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; im…

实时语音克隆:5 秒内生成任意文本的语音 | 开源日报 No.84

CorentinJ/Real-Time-Voice-Cloning Stars: 43.3k License: NOASSERTION 这个开源项目是一个实时语音克隆工具,可以在5秒内复制一种声音,并生成任意文本的语音。 该项目的主要功能包括: 从几秒钟的录音中创建声纹模型根据给定文本使用参考…

3款免费次数多且功能又强大的国产AI绘画工具

hi,同学们,本期是我们第55 期 AI工具教程 最近两个月,国内很多AI绘画软件被关停,国外绝大部分AI绘画工具费用不低,因此 这两天我 重新整理 国产 AI绘画 工具 , 最终 筛选了 3款功能强大&#xf…

易点易动固定资产管理系统:全生命周期管理的理想选择

在现代企业中,固定资产管理是一项至关重要的任务。为了确保企业的资产安全、提高资产利用率,全面管理固定资产的生命周期至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案,实现了从固定资产申购、采购、入库、领用、退库、…

深度学习之基于Pytorch照片图像转漫画风格网络系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 以下是一个基本的设计介绍: 数据准备:收集足够的真实照片和漫画图像,用于训练模…

ky10 server sp3 解决/boot/grub2/grub.cfg 找不到

现象 /boot/grub2 目录下不存在grub.cfg 配置文件 解决 执行下面脚本即可 yum install -y grub2 grub2-mkconfig -o /boot/grub2/grub.cfg 执行完成第一条命令 执行完成第二条命令 查看效果 已经生成这个文件了

linux 内存回收mglru算法代码注释2

mglru与原lru算法的兼容 旧的lru算法有active与inactive两代lru,可参考linux 内存回收代码注释(未实现多代lru版本)-CSDN博客 新的算法在引入4代lru的同时,还引入了tier的概念。 新旧算法的切换的实现在lru_gen_change_state&a…

阿里云OSS代码集成部分问题分析

公司内部开发了一个文件相关的应用,由于服务器带宽限制导致多个用户同时上传或者下载文件时速度很慢,遂将文件迁移至阿里云OSS服务器。下面是迁移的过程中遇到的部分问题。 问题1. 跨域错误 错误信息如下: Access to XMLHttpRequest at htt…

【ChatGLM2-6B】Docker下部署及微调

【ChatGLM2-6B】小白入门及Docker下部署 一、简介1、ChatGLM2是什么2、组成部分3、相关地址 二、基于Docker安装部署1、前提2、CentOS7安装NVIDIA显卡驱动1)查看服务器版本及显卡信息2)相关依赖安装3)显卡驱动安装 2、 CentOS7安装NVIDIA-Doc…

马斯克星链与芯事:30亿美元炸出卫星互联网革命,GPU算力创无限可能

★卫星互联网;算力;卫星通信;互联网;低轨卫星互联网;5G基础设施;GPT-4 Turbo;算力;地面通信;液冷;水冷;AI服务器;东数西算&#xff1b…