uniapp: 微信小程序包体积超过2M的优化方法

一、问题描述

在使用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-charts，u-charts组件比较大，并且qiun-data-charts组件也在分包subPages中有使用，因此将TabBar页面的Indicator分离到分包subPages中，以彻底将qiun-data-charts组件（包括u-charts及u-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组件目录：