uni-app——开发微信小程序 因超过2MB限制无法打包预览、上传

一、小程序对大小的限制

微信小程序每个分包的大小是2M，总体积一共不能超过16M。

二、问题描述

1、描述

使用uni-app框架运行到微信开发者工具后，微信开发者工具中的预览、真机调试和上传功能均无法使用，都是体积过大无法提交和上传，提示问题如下图，若本地代码超过**2MB**（查看代码大小在微信开发者工具右侧详情——基本信息——本地代码）。

2、问题原因

微信小程序对代码有2MB的大小限制，如果超过2MB则代码无法打包，出现这种问题无非是图片太多、体积太大。

三、解决方法

1、减少项目的大小的方法

• 建议静态资源放在网络上，tabBar栏的图片不能使用网络图片，必须使用本地图片。
• 图片资源使用png格式，同样的图片png格式的图片比jpg格式要小很多。
• 全局使用的文件直接引入到app.vue中，不要在每个页面中引入。
• 使用压缩版文件（将css、js文件压缩）

2、分包技术

2.1 分包依据

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分（建议根据业务再去划分）。

2.2 分包步骤

• 1、根据不同业务在pages同级目录中新建分包文件夹，如我的项目中goods（和商品相关的页面）、user(和我的相关的页面)、

四、相关知识点补充（pages.json文件）

1、pages.json配置项列表

2、subPackages（分包加载配置）

分包加载配置，此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，点击可详见

subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：

注意：

• subPackages 里的pages的路径是 root 下的相对路径，不是全路径。
• 微信小程序每个分包的大小是2M，总体积一共不能超过16M。
• 百度小程序每个分包的大小是2M，总体积一共不能超过8M。
• 支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。
• 分包下支持独立的 static 目录，用来对静态资源进行分包。
• uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明
• 针对vendor.js过大的情况可以使用运行时压缩代码

HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码

cli创建的项目可以在pacakge.json中添加参数--minimize，示例：

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

3、preloadRule（分包预载配置）

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

app的分包，同样支持preloadRule，但网络规则无效。

知识点截取官网：https://uniapp.dcloud.io/collocation/pages?id=subpackages