uniapp: 微信小程序包体积超过2M的优化方法(主包从2.7M优化到1.5M以内)

server/2024/11/20 3:27:04/

一、问题描述

在使用uniapp进行小程序>微信小程序开发时,经常会遇到包体积超过2M而无法上传:

在这里插入图片描述

二、解决方案

目前关于小程序>微信小程序分包大小有以下限制:

整个小程序所有分包大小不超过 30M(服务商代开发的小程序不超过 20M)
单个分包/主包大小不能超过 2M

网络上关于优化的方式大体如下:

1.图片优化:

(1)静态图片尽量使用线上地址,不要放到项目中:
我们可以将static的图片上传图片服务器上去,小程序使用链接的形式来下载使用图片。
(2)除了tabBar的iconPath,因为那个只能使用本地资源,相对来说这个不大。
(3) 图片压缩:可以使用在线压缩工具https://tinypng.com/

2.分包加载:

除了TabBar的页面,其他的页面进行分包处理,保证主包的大小。具体分包方法请参考官方文档:使用分包

3.依赖分离:

使用分包之后会发现遇到了一个奇怪的问题,子包的组件和js文件会被打包到主包的vendor.js文件中,这就导致了vendor.js过大。

检查manifest.json,在这个文件下的源码视图中,在mp-weixin节点有个optimization,optimization下的subpackages节点时用来控制微信分包的,需要将此节点设为true:

"optimization" : {"subpackages" : true
}

在这里插入图片描述

配置好后重新运行,会发现分包的js文件将不会再打包到主包的vendor.js中了。(注意:实际还是有可能存在分包引入的js被打包到vendor.js中,详情参考《uniapp: vite配置rollup-plugin-visualizer进行小程序依赖可视化分析减少vender.js大小》)

4.启用代码压缩:

在Hbuilder中启用运行时压缩代码:

在这里插入图片描述

5.发行小程序

在这里插入图片描述

以上便是网络上常见的优化方式,如果上述优化仍无法满足要求,那么可以考虑:

6.分包异步化:

这部分涉及跨分包自定义组件引用跨分包 JS 代码引用,本文只对跨分包自定义组件引用的使用及注意事项进行说明,跨分包 JS 代码引用的使用可以参考文档。

本文基于新旧项目融合改造遇到的包过大问题而尝试采用跨分包自定义组件引用的方式,新旧两个项目分别有一个页面是TabBar的页面,而两个页面都各自引用了比较大的components内的组件,从而导致主包太大。下面将其中一个TabBar页面所使用的组件Indicator分离到分包subPages中:

首先对Indicator组件做一个说明:Indicator组件使用了qiun-data-charts组件,而qiun-data-charts引入了u-chartsu-charts组件比较大,并且qiun-data-charts组件也在分包subPages中有使用,因此将TabBar页面的Indicator分离到分包subPages中,以彻底将qiun-data-charts组件(包括u-chartsu-charts组件)分离主包。

代码及配置示例如下:

// 主包src/pages/home/index.vue
<template><Indicator />
</template>

自定义组件设置占位组件:

// pages.json
{"pages": [{"path": "pages/home/index","style": {"navigationBarTitleText": "首页","usingComponents": {"indicator": "../../subPages/components/indicator/index"},"componentPlaceholder": {"indicator": "view"}}}]
}

至此,已完成官方文档关于分包异步化的设置,但就此运行可能会报异步分包的组件路径找不到:

在这里插入图片描述
查看开发者工具中的代码目录:

在这里插入图片描述

也确实找不到异步分包的Indicator组件目录。

原因应该是hbuilderx对于分包内未被使用的components不会进行打包。因此,可以新建一个空页面asyncSubPage,在该页面引入Indicator组件:

在这里插入图片描述

// src\subPages\asyncSubPage\index.vue<template><div></div>
</template><script>import Indicator from '../components/indicator/index.vue'export default {components: {Indicator}}
</script><style>
</style>

在pages.json中注册页面:

"subPackages": [{"root": "subPages","pages": [{"path": "asyncSubPage/index"},...]},...
]

至此,位于主包内的一个大组件就分离到分包中,从而异步加载使用。最后再看一下微信开发者工具中subPages的components中已经出现indicator组件目录:

在这里插入图片描述
优化效果:原本项目打包之后主包将近2.7M,通过1~5的方法优化后,主包依然还有2164KB,最后使用分包异步化,将TabBar页面中的两个大组件分离至分包中,成功将主包大小降至1.5M以内:

在这里插入图片描述


http://www.ppmy.cn/server/143363.html

相关文章

CISAW- CDF 认证电子数据取证训练: Linux 取证分析实战

基于《Linux 取证分析实战》一书&#xff0c;助力具备一定取证能力的专业人士拓展其自身能力&#xff0c;深度理解 Linux 环境下的证据所处位置、相关日志以及分析工具。 其一&#xff0c;Linux 取证概述&#xff1b; 其二&#xff0c;Linux 概述&#xff1b; 其三&#xff…

CANoe发送和接收CAN DataBase(DBC文件)数据

目录 1、接收CAN数据&#xff0c;DBC解析数据内容 2、发送DBC定义的CAN报文 CANoe是一款强大的网络仿真和开发工具&#xff0c;它支持发送和接收基于CAN DataBase&#xff08;DBC文件&#xff09;的数据。 1、接收CAN数据&#xff0c;DBC解析数据内容 要使用CANoe接收CAN数…

【深度学习】模型参数冻结:原理、应用与实践

在深度学习领域&#xff0c;模型参数冻结是一种重要的技术手段&#xff0c;它在模型训练和优化过程中有着广泛的应用。本文将详细介绍模型参数冻结的相关概念、应用场景、在代码中的实现方式以及一些实际的案例分析。 一、模型参数冻结的概念 在深度学习模型的训练过程中&…

了解存储过程

深入了解数据库存储过程 在数据库管理中&#xff0c;存储过程是一个强大的工具&#xff0c;可以提高数据库的性能、可维护性和安全性。本文将深入探讨存储过程的概念、优势、创建和使用方法。 一、存储过程的概念 存储过程是一组为了完成特定功能的 SQL 语句集&#xff0c;经编…

flutter pigeon gomobile 插件中使用go工具类

文章目录 为什么flutter要用go写工具类1. 下载pigeon插件模版2. 编写go代码3.生成greeting.aar&#xff0c;Greeting.xcframework4. ios5. android6. dart中使用 为什么flutter要用go写工具类 在Flutter 应用中&#xff0c;有些场景涉及到大量的计算&#xff0c;比如复杂的加密…

基于Redis实现延时任务

在 Redis 中实现延时任务的功能主要有两种方案&#xff1a;Redis 过期事件监听和 Redisson 内置的延时队列。下面将详细解释这两种方案的原理、优缺点以及面试时需要注意的相关细节。 方案 1&#xff1a;Redis 过期事件监听 实现原理 Redis 从 2.0 版本开始支持**发布/订阅&a…

Argo workflow 拉取git 并使用pvc共享文件

文章目录 拉取 Git 仓库并读取文件使用 Kubernetes Persistent Volumes&#xff08;通过 volumeClaimTemplates&#xff09;以及任务之间如何共享数据 拉取 Git 仓库并读取文件 在 Argo Workflows 中&#xff0c;如果你想要一个任务拉取 Git 仓库中的文件&#xff0c;另一个任…

Upload-Labs-Linux1学习笔迹 (图文介绍)

lab 1 前端绕过jpg&#xff0c;后端改php后缀&#xff0c;通过蚁剑连接&#xff0c;在根目录下找到flag&#xff0c; flag{71dc5328-c145-4fbf-a987-4dfb4c1dacd1} //写以下文件a.jpgGIF89 <?php eval($_POST[cmd]); ?> labs 2 $is_upload false; $msg null; if …