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

一、问题描述

在使用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以内:

相关推荐
程序员小刘2 小时前
Uniapp如何适配HarmonyOS5?条件编译指南以及常见的错误有哪些?
uni-app
耶啵奶膘4 小时前
uniapp+vue2+h5图片下载保存,微信浏览器、非微信浏览器
uni-app·notepad++
iOS阿玮7 小时前
排雷,金融类型产品14天封号倒计时脱困。
uni-app·app·apple
Random_index8 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
ywyy67988 小时前
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
人工智能·小程序·短剧·推客系统·推客小程序·推客系统开发·推客小程序开发
华子w90892585911 小时前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app
浩宇软件开发11 小时前
基于微信小程序的校园二手交易平台
微信小程序·小程序·校园二手交易
weixin_1772972206911 小时前
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
小程序
王——小喵11 小时前
启动已有小程序项目
小程序
说私域12 小时前
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
人工智能·小程序·开源·零售