uni-app小程序本地打包超过2M不能预览问题；小程序打包过大不能预览和真机调试；uni-app分包；

一、问题：我们在小程序工具中开发时候，需要本地打包，但是当本地的打包文件大于2M时候，预览的二维码就会有问题，导致真机扫码打不开或者有遗漏。

二、此时就需要开启分包

1.微信小程序每个分包的大小是2M，总体积一共不能超过20M。
2.开启分包后，再次编辑打包，预览的二维码就可以正常打开小程序了。

三、uni-app官方分包文档

四、分包注意项

1.微信小程序每个分包的大小是2M，总体积一共不能超过20M。
2.开启分包后，再次编辑打包，预览的二维码就可以正常打开小程序了。
3.开启分包，必须注意：需要将原来的打包文件unpackage下的dist文件删除；否则编译时候，你会发现自己的分包反而越来越大；删除原来打包的dist后再重新发行打包就行。

五、分包步骤1

1.在pages同级，创建pagesA和pagesB两个分包；文件夹的名字随便命名，每分一个包就创建一个文件夹；如下图
2.需要注意：小程序的首页和tabBar页必须放在主包pages内；其他页面可以放在分包内
3.分包下支持独立的 static 目录，用来对静态资源进行分包。

六、分包步骤2

1.将部分页面移到分包pagesA或者pagesB下；
2.注意：如果你一开始就分包了，路径跳转或者引入应该不会有问题；但是如果你一开始都是在pages下，后来才开始分包，
然后将部分vue页面移到分包文件夹下，可能路径跳转和引入的文件路径就错了，就需要手动修改跳转路径和引入路径，方式修改见下图（说多了都是泪）；。

引入的修改：使用@引入

每个分包下都可以有自己的static，放置图片路径跳转的修改，例如主包pages的下的index页面，跳转到了分包pagesB下的get-password页面：只需要写上get-password在pagesB的路径即可：

        uni.navigateTo({url:"/pagesB/get-password?obj= " +encodeURIComponent(JSON.stringify(obj)),});

七、分包步骤3

1.更改pages.json配置：如下图。

1.1pages主包：不需要动，只需要方主包页面

1.2subPackages：分包加载配置，subPackages 节点接收一个数组，数组每一项都是应用的子包；subPackages 里的pages的路径是 root 下的相对路径，不是全路径。

例如我的就是放了pagesA和pagesB，一定要注意root的是写分包名称，不需要 /；path写对应的页面路径

  "subPackages": [{"root": "pagesA","pages": [{"path": "add-car","style": {"navigationBarTitleText": "新增车辆"}},{"path": "car-info","style": {"navigationBarTitleText": "详情车辆"}},]},{"root": "pagesB","pages": [{"path": "get-password","style": {"navigationBarTitleText": "找回密码"}}]}],

1.3preloadRule：分包预载配置

  "preloadRule": {"pagesA/add-car": {"network": "all","packages": ["__APP__"]},"pagesA/car-info": {"network": "all","packages": ["__APP__"]},"pagesB/get-password": {"network": "all","packages": ["pagesB"]}},

2.开启分包后，再次编辑打包，预览的二维码就可以正常打开小程序了。

八、分包步骤4

1.点击左侧列表manifest.json–>源码视图，找到npm-wexin，开启分包优化

//开启分包优化"optimization" : {"subPackages" : true}

九、分包步骤5

1.压缩代码

十、分包步骤6

1.删除原有的打包文件。

2.重新发行打包。

3.分包前后的效果对比：存在主包和分包，体积也相应变化减小，预览也可以了。

分包前:

分包后：

有用就点个赞吧！

uni-app小程序本地打包超过2M不能预览问题；小程序打包过大不能预览和真机调试；uni-app分包；相关推荐

vs使用android真机调试,UnityVS真机调试Android APP
UnityVS真机调试Android APP 前提:完成UnityVS环境搭建.Unity Android环境搭建.Unity Android打包步骤: 1. USB线连接手机和电脑,在手机的开发者 ...
IOS真机调试uni.scanCode调用报错，黑屏
ios调用uni.scanCode报错,真机测试黑屏. 解决: 1,升级HBuilder到最新版本. 2,在manifest.json文件添加了对应的模块权限配置(Barcode(扫码)和Camera ...
微信小程序开发者工具真机调试和预览连接本地服务器
微信小程序开发者工具真机调试连接本地服务器网上参考了很多方法只有这个方法能解决本地服务器在微信开发者工具预览或者真机调试的连接,话不多说看图. 第一步 win+R,CMD输入ipconfig查看本地 ...
微信小程序真机调试,苹果用户记得打开本地网络
微信小程序真机调试,苹果用户记得打开本地网络我的真机调试一直显示:request:fail errcode:-109 cronet_error_code:-109 error_msg:net::ER ...
微信小程序如何本地进行真机调试？
这次记录的是真机调试是后台是本地服务器,显示未能连接到服务器的问题. 比如图片下载到本地,视频下载到本地...等等在小程序开发时我们为了方便而不去搭建域名,在本地直接localhost就可以使用 ...
关于微信小程序真机调试获取不到本地服务器
查了好多资料成功了,我来整理下老样子先介绍问题! 就是我在开发者工具中用localhost能访问到本地服务器,但是真机调试却不能了解决办法: 1·必须手机和电脑在同一个局域网之中,实在不行你手机 ...
微信开发者工具无法选择预览和真机调试_小程序开发第二篇：使用微信小程序开发者工具、wepy框架初始化项目...
1.微信小程序开发者工具使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue.我们选择的是 wepy ...
小程序真机调试提示系统错误
Error: 系统错误,错误码:80051,source size 7935KB exceed max limit 2MB [20220929 16:18:58][wxfc8aa5984cac7f72 ...
Windows 10 安装 Android Studio 安装创建APP 创建模拟器调试真机调试编译签名打包APP
要想使用Android Studio开发android APP,需要安装三个工具:JDK.Android Studio.Android SDK 先了解这三个工具是做什么的 JDK:JDK是Java语言 ...