微信小程序分包

微信小程序主体包最大 也就20M,分包最大是2M 超过就会报错,tabBar页面不能分包。

分包教程

第一步:在项目的根目录下找到 【manifest.json文件】 打开后 最底下有个【源码视图】打开后找到 【小程序特有相关】的注释,然后添加"optimization":{"subPackages": true}意思是开启分包。

下面就是配置一些小程序的代码

javascript 复制代码
       "mp-weixin" : {
			"appid" : "xxxxxxxxxxxxx",//微信小程序的id
			"setting" : {
				"urlCheck" : false
			},
			"usingComponents" : true,
			
			"optimization": { //开启分包
				"subPackages": true
			}
		},

第二步:开启完分包后,在项目的根目录新建一个文件 【pagesA】(名字是自己算便起的)。

把你觉得文件较大的可以单独拿出来,扔进pagesA文件中,扔进来以后 pages.json里面的文件路径需要删掉。当然我们 需要在 pages:\[\]下面,自己写一个分包路径。

分包 (tabBar 页面不能分)

"root" 是子包的根目录, 这里写了pagesA 下面的 "path" 里面就不用再写pagesA/xxx/xxx 了,直接写pagesA 里面的路径即可。

javascript 复制代码
          "subPackages":[
				{
					"root": "pagesA",//子包的目录
					"pages": [
						{
							"path": "pages1/BOFAANG/BOFAANG", //这里的路径需要格外注意
							"style" :
							{
								"navigationBarTitleText" : "星星眨着小眼睛",
								"navigationStyle":"custom",//小程序禁用原生导航
								"app-plus": {
									"titleNView": false//h5+APP 禁用原生导航
								}
								
							}
						},
					]
				},
			],

分包完成。

怎么查看包的大小?

打开微信开发者工具 右上角有一个详情,打开后找到【本地代码】 旁边有代码依赖分析,点击后就能看到 主包多大 分包多大。

相关推荐
阿祖zu4 小时前
训练师 Agent 小程序产品上线啦
微信小程序·llm·agent
Rooting++8 小时前
小程序{{ }}和vue{{ }}语法的区别
前端·vue.js·小程序
博、、11 小时前
折扣卡CPS系统源码实战开发指南:从架构设计到落地部署全解析
小程序·需求分析
lhldsg14 小时前
折扣卡CPS小程序定制全流程实战指南:从需求分析到上线部署
java·前端·小程序
suliqiang15 小时前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode
weixin_493503671 天前
商会小程序附件上传:分片上传 + OSS 直传完整实现(Vue3 + 阿里云 OSS 实战)
阿里云·小程序·云计算
优度网1 天前
微信小程序主体变更公证书线上办理流程与业务交接风险规避方法浅析(2026)
小程序
ynchyong1 天前
微信小程序启动顺序遇到的一个坑
前端·微信小程序
m0_587383001 天前
外卖CPS系统开发实战:从架构设计到运营落地全指南
java·spring·小程序·架构·需求分析
T01156182 天前
全栈项目实战手记|艺培场馆课时预约小程序 PC 管理端 Demo 完整开发成果展示
小程序