前言

每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 20M

单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。具体的可以看看官方的文档，下面我具体说一下怎么解决这个问题

一、分包

1、配置manifest.json

添加"optimization":{"subPackages":true}；开启分包

2、在pages.json里面配置

subPackages跟pages放在同级目录，其中两个参数root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；可以理解为在外面又包了一层。

"subPackages":[{"root":"pagesA","pages":[ {"path" : "pages/project/project-add","style" :                                                                                    {"navigationBarTitleText": "新增项目","enablePullDownRefresh": false}}  ]}],

3、新建分包目录

看一下目录，在分包里可以像外面一样定义components组件，我这个就说这个组件占用了292.1kb,总共就2Mb,也可以定义static放一些静态的图片资源等等

4、查看

可以看到已经分出两个包了

二、图片上传至服务器

把图片都放到服务器上，访问服务器地址

三、先发行再打包

1、点HBuilder X左上角发行按钮，选择uni-app微信小程序打包。上面会自动有你到项目名称和appid不用写直接点发行就可以了

2、发行后会自动打开微信开发者工具，在进行打包上传，你会发现文件小了很多，把你的文件给压缩了。

总结

遇到了这个问题，所以就写写记录一下，个人建议如果项目比较大的话做商城内等项目还是做分包比较好，加油吧少年。

uni-app打包超出2M处理相关推荐

关于uni.appd打包H5 图片在IOS 上不显示的问题
最近在改前人的代码,上一任的前端用的是uni.app打包的H5页面,随后要增加一个定位的功能.....,一想也没什么困难的嘛,就开始写了,结果这才是噩梦的开始... 定位很快就写好了用的是uni. ...
最新码支付源码+完整版+免挂监听回调+微信、支付宝、qq监控APP打包教程
码支付手机APP打包教程码支付官网:https://pay.madanbao.com 1.打开uniapp的官网注册一个账号,网址为:www.dcloud.io/ 3.打开工具导入项目,打开mani ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app push 集成小米
重新设置厂商推送设置后,需要重新制作自定义基座,包括添加和修改厂商推送设置用自定义的基座打包好测试包,安装到手机上. 先测试小米后台是否能推送成功推送后,手机就能接受到消息了再看java代 ...
uni-app 开发app 打包后的尺寸与使用hbuilderx预览时不符
uni-app 开发app 打包后的尺寸与使用hbuilderx预览时不符 uni-app rpx 比例失调 uni-app 开发app 横屏或者屏幕尺寸过大时样式错乱 uni-app 有解决方案 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
人人商城生成app教程_人人商城APP打包教程（APICLOUD版）
一.APP环境搭建和配置编译 1.登录APICLOUD后台新建应用 step1 注册账号注册apicloud 账号并登录APICLOUD控制台 step2 新建应用再账户下面找到开发控制台=> ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

uni-app打包超出2M处理

前言