分包技术

一、小程序对大小的限制
二、问题描述
- 1、描述
- 2、问题原因
三、解决方法
- 1、减少项目的大小的方法
- 2、分包技术
- - 2.1 分包依据
  - 2.2 分包步骤
四、相关知识点补充（pages.json文件）
- 1、pages.json配置项列表
- 2、subPackages（分包加载配置）
- 3、preloadRule（分包预载配置）

一、小程序对大小的限制

微信小程序每个分包的大小是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

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

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
uniapp开发微信小程序，开发者工具、真机预览都没问题，唯独预览、体验版在手机上列表顺序错乱，用的localeCompare做的中文排序，终于找到问题并解决掉了，记录一下子
中文转拼音资源地址:https://download.csdn.net/download/qq_38652871/10906193 排序方法记录地址:https://blog.csdn.net/qq_ ...
uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）
思路: 用户触发某一事件弹出一个弹窗(用户可能直接手机拍摄或者直接从手机相册选择照片),用户选择完方式后,调用对应的api并把选择好的照片上传到服务器. 涉及到的API: 1.uni.showActi ...
微信小程序saveFile，openDocument方法下载、预览pdf文件不能用本地应用打开（不能另存为）的问题
微信小程序saveFile,openDocument方法下载.预览pdf文件不能用本地应用打开(不能另存为)的问题查看官方文档的openDocument()方法,发现加一个showMenu: tru ...
微信小程序打开PDF、word等文件预览
近期在使用uniapp开发微信小程序时,碰到了要在小程序上打开PDF文件预览的需求,使用原生微信小程序开发的实现和这个也是类似的.实现大致代码如下: // 下载文件到本地,下载成功后会返回临时文件路径 ...
微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
开发微信小程序，导入使用本地图片，Android手机上测试图片显示空白
微信小程序中,导入使用本地图片,开发时在电脑上显示正常,iOS上也能正常显示,但是在Android上图片显示空白, 如图: 原因:网上查找,说有可能是这些原因 1.image src中的图片地址对英文 ...
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...

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

分包技术

一、小程序对大小的限制

二、问题描述

1、描述

2、问题原因

三、解决方法

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

2、分包技术

2.1 分包依据

2.2 分包步骤

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

1、pages.json配置项列表

2、subPackages（分包加载配置）

3、preloadRule（分包预载配置）

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

最新文章

热门文章

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

分包技术

一、小程序对大小的限制

二、问题描述

1、描述

2、问题原因

三、解决方法

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

2、分包技术

2.1 分包依据

2.2 分包步骤

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

1、pages.json配置项列表

2、subPackages（分包加载配置）

3、preloadRule（分包预载配置）

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

最新文章

热门文章

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

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