微信小程序/uniapp 程序分包处理,小程序性能优化

news/2024/9/18 20:53:44/ 标签: 小程序, 微信小程序, uni-app

目录

  • 分包的作用
  • 文件分包
  • 分包配置
  • 注意事项

分包的作用

微信小程序性能与体验优化官网解释
使用 分包加载 是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分,将小程序的页面按使用频率和场景拆分成不同分包,实现代码包的按需加载。

分包加载具有以下优势:

承载更多功能小程序单个代码包的体积上限为 2M,使用分包可以提升小程序代码包总体积上限,承载更多的功能与服务。
降低代码包下载耗时:使用分包后可以显著减少启动时需要下载的代码包大小,在不影响功能正常使用的前提下,有效降低启动耗时。
降低小程序代码注入耗时:若未开启按需注入,小程序编译时会将所有 js 文件打包成同一个文件一次性的注入,并执行所有页面和自定义组件的代码。分包后可以降低注入和实际执行的代码量,从而降低注入耗时。
降低页面渲染耗时:使用分包可以避免不必要的组件和页面初始化。
降低内存占用:分包能够实现页面、组件和逻辑较粗粒度的按需加载,从而降低内存的占用。

文件分包

微信开发者工具官网分包加载
将要分包出来的文件新建文件夹,独立出来,目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

分包配置

首先在manifest.json文件中的源码视图中添加:

"mp-weixin" : {"optimization" : {"subPackages" : true // 设置为true},},

然后在pages.json文件中,将主包和分包分别配置:

{"pages":["pages/index","pages/logs"],"subPackages": [{"root": "packageA","pages": ["pages/cat","pages/dog"],"entry": "index.js"}, {"root": "packageB","name": "pack2","pages": ["pages/apple","pages/banana"]}]
}

subPackages 中,每个分包的配置有以下几项:

字段类型说明
rootString分包根目录
nameString分包别名,分包预下载时可以使用
pagesStringArray分包页面路径,相对于分包根目录
independentBoolean分包是否是独立分包
entryString分包入口文件

注意事项

打包原则

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

引用原则

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

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

分包入口文件
每个分包的配置中,entry 字段可以指定该分包中的任意一个 JS 文件作为入口文件,该文件会在分包注入时首先被执行。

指定的 JS 文件应该填写相对于分包根目录的路径,例如需要指定 /path/to/subPackage/src/index.js 作为分包 /path/to/subPackage 的入口文件时,应填写 src/index.js。

调试这个功能需要 1.06.2406242 或以上版本的微信开发者工具,正式环境没有版本需求。


http://www.ppmy.cn/news/1525374.html

相关文章

Naive UI中的时间选择器如何禁止选择今天之前的时间

:is-date-disabled"dateDisabled"<n-date-pickerv-if"formData.timeEndActive"type"date"style"width: 100%"placeholder"请选择任务结束时间"value-format"yyyy-MM-dd 23:59:59":is-date-disabled"dateD…

迷你洗衣机哪个牌子好又实惠?5大主流产品综合实测分享!

在日常生活中&#xff0c;内衣洗衣机已成为现代家庭必备的重要家电之一。选择一款耐用、质量优秀的内衣洗衣机&#xff0c;不仅可以减少洗衣负担&#xff0c;还能提供高效的洗涤效果。然而&#xff0c;市场上众多内衣洗衣机品牌琳琅满目&#xff0c;让我们往往难以选择。那么&a…

【Linux基础】02 权限

2024-09-11 shell ⭐原理上初步理解 shell 为什么&#xff1f; 用户不能直接访问 OS操作系统本身&#xff1a;易用程度安全 可以检查用户的指令是否非法、安全 是什么&#xff1f; 核心工作&#xff1a;用户和内核之间 需求指令 <-shell->执行结果 将使用者的命令翻译…

ChatGPT在环境科学领域的应用前沿分享

ChatGPT在环境科学领域的应用前沿 在党的二十届三中全会上&#xff0c;明确要求健全因地制宜的发展新质生产力体制机制。新质生产力通过创新驱动&#xff0c;以高科技、高效能、高质量为特征&#xff0c;旨在摆脱传统经济增长方式和生产力发展路径&#xff0c;符合新发展理念。…

mathorcup发邮件:参赛必看邮件撰写技巧?

mathorcup发邮件的注意事项&#xff1f;如何使用mathorcup发信&#xff1f; 无论是提交参赛作品、咨询比赛规则&#xff0c;还是与组委会沟通&#xff0c;一封清晰、专业的邮件都能为你赢得更多机会。AokSend将为你详细介绍mathorcup发邮件的撰写技巧&#xff0c;帮助你在比赛…

基于JavaWeb开发的java springboot+mybatis电影售票网站管理系统前台+后台设计和实现

基于JavaWeb开发的java springbootmybatis电影售票网站管理系统前台后台设计和实现 &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获…

共享内存喜欢沙县小吃

旭日新摊子好耶&#xff01; 系统从0开始搭建过通信方案&#xff0c;本地通信方案的代码&#xff1a;System V IPC 里面有共享内存、消息队列、信号量 共享内存 原理 两个进程有自己的内存区域划分&#xff0c;共享内存被创建出的时候是归属操作系统的&#xff0c;还是通过…

基于UDP的简易网络通信程序

目录 0.前言 1.前置知识 网络通信的大致流程 IP地址 端口号&#xff08;port&#xff09; 客户端如何得知服务器端的IP地址和端口号&#xff1f; 服务器端如何得知客户端的IP地址和端口号&#xff1f; 2.实现代码 代码模块的设计 服务器端代码 成员说明 成员实现 U…

运行PaddleOCR报错:requests.exceptions.SSLError: HTTPSconnectionPool……

文章目录 问题描述解决方法 问题描述 在运行以下代码时报错&#xff1a; ocr PaddleOCR(lang"en")解决方法 打开cmd&#xff0c;输入以下命令&#xff0c;查找Python解释器所在路径。 找到 Lib\site-packages\paddleocr\ppocr\utils\network.py&#xff0c;将代码…

【Linux】数据链路层

一、数据链路层引入 1.1 数据链路层的功能 在网络层中&#xff0c;我们使用IP协议进行通信&#xff0c;需要进行跨网络转发到目标主机&#xff0c;本质上就是一个报文经历了无数个子网&#xff0c;而数据链路层就是解决在一个子网中如何传输报文的问题。 数据链路层的功能是&a…

5款好用的远程控制软件测评分享|总有一款适合你!

随着远程办公和协作的需求日益增加&#xff0c;远程控制软件已经成为许多人日常生活和工作中不可或缺的一部分。 无论是技术支持、家庭办公还是远程协作&#xff0c;一款好的远程控制软件都能够极大地提升效率和便利性。 以下是五款市面上口碑较好、功能强大的远程控制软件的…

笔记9.13

注册元类型的好处 信号与槽机制&#xff1a;允许自定义类型作为信号与槽机制的参数传递。属性系统&#xff1a;允许自定义类型作为对象的属性。序列化&#xff1a;允许自定义类型通过QDataStream进行序列化。类型安全的容器&#xff1a;允许自定义类型用于类型安全的容器&…

Grafana 汉化

点击 Home -> Administration 点击 Default preferences 点击 中文&#xff08;简体&#xff09;后点击 Save 即可

MiniCPM-V: A GPT-4V Level MLLM on Your Phone

MiniCPM-V: A GPT-4V Level MLLM on Your Phone 研究背景和动机 现有的MLLM通常需要大量的参数和计算资源&#xff0c;限制了其在实际应用中的范围。大部分MLLM需要部署在高性能云服务器上&#xff0c;这种高成本和高能耗的特点&#xff0c;阻碍了其在移动设备、离线和隐私保…

UnrealEngine 打包Android平台应用

虚幻引擎 支持将项目发布到 安卓&#xff08;Android&#xff09; 移动设备上&#xff0c;并且提供了若干功能帮你将项目发布到 谷歌游戏商店。本节包含了如何设置Android开发环境、如何使用Android功能和服务、以及如何为发布游戏做准备相关的指南。 当前SDK要求 当前UE版本…

Apisix离线安装

上传离线包 #ll apisix-3.2.2-0.el7.x86_64.rpm apisix-base-1.21.4.1.8-0.el7.x86_64.rpm apisix-dashboard-3.0.1-0.el7.x86_64.rpm cyrus-sasl-2.1.26-24.el7_9.x86_64.rpm cyrus-sasl-devel-2.1.26-24.el7_9.x86_64.rpm cyrus-sasl-gssapi-2.1.26-24.el7_9.x86_64.rpm cyr…

第十八章 番外 余弦相似度

余弦相似度&#xff08;Cosine Similarity&#xff09;是一种衡量两个非零向量之间角度的度量方式&#xff0c;用于评估它们之间的相似性。它的值范围从 -1 到 1&#xff0c;其中 1 表示完全相同的方向&#xff08;即向量完全相同&#xff09;&#xff0c;0 表示正交&#xff0…

台球助教小程序开发/APP源码部署

开发一个美女台球助教微信小程序&#xff0c;需要综合考虑技术实现、用户体验、内容合规性以及市场推广等多个方面。下面是一个大致的开发流程和关键要点&#xff1a; 1.市场调研与需求分析 目标用户定位&#xff1a;明确你的小程序主要服务于哪些人群&#xff0c;比如台球爱好…

Docker Compose 开机自启动配置指南

在 Docker Compose 中设置开机自启动可以通过创建一个 systemd 服务&#xff0c;确保 Docker 容器在系统启动时自动运行。以下是一个示例步骤&#xff1a; 步骤 1&#xff1a;编写 docker-compose.yml 文件 确保你的项目已经有一个 docker-compose.yml 文件&#xff0c;这是 …

【四范式】浅谈NLP发展的四个范式

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是计算机科学&#xff0c;人工智能&#xff0c;语言学关于计算机和人类自然语言之间的相互作用的领域&#xff0c;是计算机科学领域与人工智能领域中的一个重要方向。NLP发展到今天已经进入到了…