随手记:小程序体积超出2M包大小如何优化

devtools/2025/1/15 23:29:24/

小程序的包体积限制是2M,超出包大小如何优化
先简单列出,最近比较忙,后续优化明细,有着急的先留言踢我

1.分包

留几个主要的页面体积小的,剩下的在page.json中拆到subpackages中,简单举个例子

"pages": [ //pages数组中第一项表示应用启动页,参考https://uniapp.dcloud.io/collocation/pages{"path": "pages/home/index","style": {"navigationBarTitleText": "","enablePullDownRefresh": true}},{"path": "pages/shoppingCart/index","style": {"navigationBarTitleText": "购物车","enablePullDownRefresh": true}},{"path": "pages/user/index","style": {"navigationBarTitleText": "我的"}},],"subpackages": [// 订单相关{"root": "pages/order","pages": [{"path": "index","style": {"navigationBarTitleText": "订单"}},{"path": "refund","style": {"navigationBarTitleText": "申请退款"}},{"path": "drugs/detail","style": {"navigationBarTitleText": "订单详情"}},{"path": "afterSale","style": {"navigationBarTitleText": "查看售后"}},{"path": "consultation/detail","style": {"navigationBarTitleText": "订单详情"}},{"path": "servicePack/detail","style": {"navigationBarTitleText": "订单详情"}},{"path": "drugsAfter/chooseType","style": {"navigationBarTitleText": "选择售后类型"}},{"path": "drugsAfter/chooseShop","style": {"navigationBarTitleText": "选择售后货物"}},{"path": "drugsAfter/submitRefund","style": {"navigationBarTitleText": "提交售后"}},{"path": "drugsAfter/trackNumber","style": {"navigationBarTitleText": "填写快递单号"}},{"path": "drugsAfter/afterInfo","style": {"navigationBarTitleText": "售后详情"}},{"path": "drugsAfter/negotiationRecord","style": {"navigationBarTitleText": "协商记录"}}]},],


2.图片放到服务器

将图片放到服务器当中,应当同步所有环境,并且最好自己再备份一个文件夹存储图片,用于服务器出现问题时,图片不会丢失,代码中用环境变量拼接路径

代码不完全,只截取其中一部分仅供思路参考!!

定义环境变量

存放在状态管理器里

对应使用页面:

服务器创建对应的文件夹,通过final-shell或者其他的传上去

3.大功能需求内嵌H5(但分享会收到影响)

这个思路是小程序中某个按钮或者图标,跳转直接打开webview。里面就放着你H5页面的代码
4.代码压缩设置

1.运行代码时选择压缩代码

开发者工具打包之前勾选压缩设置


5.删除多余代码
删除注释代码,还有其他不使用的页面和代码,也是可以提升性能,虽然只有一点点提升

如果对你有帮助,请点赞收藏哦~~


http://www.ppmy.cn/devtools/107654.html

相关文章

【大数据】Canal实现MySQL数据增量同步至Kafka:原理与配置解析

文章目录 一、引言:Canal简介二、数据提取原理:Binlog与Canal的协同工作1. Binlog简介2. Canal工作原理 三、Canal配置解析:搭建MySQL到Kafka的数据桥梁1. MySQL配置(1)开启Binlog:(2&#xff0…

【Ubuntu20.04】配置深度学习环境

参考 Ubuntu20.04配置深度学习环境(全网最细最全) NVIDIA显卡驱动安装安装CUDA 通过终端nvidia-smi查看自己能安装的最高CUDA版本,在官方网址下载需要的版本。安装cuDNN 在官方网址选择适配于自己安装的CUDA版本的cuDNN安装Anaconda &#x…

【Tools】计算机视觉(CV)技术的优势和挑战。

我们从不正视那个问题 那一些是非题 总让人伤透脑筋 我会期待 爱盛开那一个黎明 一定会有美丽的爱情 🎵 范玮琪《是非题》 计算机视觉(CV)技术是一种模拟人类视觉系统的能力,通过使用计算机算法和图像处理技…

Docker(完整实验版)

目录 一 Docker 1.1 Docker简介 1.1.1 什么是docker? 1.1.2 docker在企业中的应用场景 1.1.3 docker与虚拟化的对比 1.1.4 docker的优势 1.2 部署docker 1.2.1 配置软件仓库 二 Docker的基本操作 2.1 Docker镜像管理 2.1.1 搜索镜像 2.1.2 拉取镜像 2…

Nginx: 缓存, 不缓存特定内容和缓存失效降低上游压力策略及其配置示例

概述 在负载均衡的过程中,有一个比较重要的概念,就是缓存利用缓存可以很好协调Nginx在客户端和上游服务器之间的速度不匹配的矛盾从而很好的解决整体系统的响应速度 如果用户需要通过Nginx获取某一些内容的时候,发起一个request请求这个请求…

WS2812B驱动

#include "stm32f10x.h" #include "TIM2.h" #include "DMA1.h"//#define WS2812B_LED_QUANTITY 32 //灯珠数量 #define WS2812B_LED_QUANTITY 12 //灯珠数量//定义数组 类型符 数组名[常量] uint32_t WS2812B_Buf[WS2812B_LED_QUANTITY]; //0xG…

BUUCTF—[网鼎杯 2020 朱雀组]phpweb

题解 打开题目是这样子的。 啥也不管抓个包看看,从它返回的信息判断出func后面的是要调用的函数,p后面的是要执行的内容。 那我们直接执行个系统命令看看,可以看到返回了hack,估计是做了过滤。 funcsystem&pls 直接读取源码…

VSCOD常用扩展库

以下是一些常用的 Visual Studio Code 扩展库。 ESLint:用于 JavaScript 和 TypeScript 的静态代码分析工具,帮助发现和修复代码错误和风格问题。 Prettier:用于自动格式化代码的工具,支持多种编程语言。 GitLens:为…