uniApp 开发小程序 减少打包体积

随着开发页面越来越多 . 部分的静态资源图片也越来越多 导致项目体积比较大 

以下以微信小程序举例  限制了每个包的大小为2m 导致无法真机调试和发布  

所以产生了一个问题 缩小代码体积

本人目前已知的办法有3个


1.在使用HBuilder X进行开发微信小程序时 可进行设置 压缩微信小程序代码体积

点击 HBuilder X 上方的  运行-> 运行到小程序模拟器 ->运行是是否压缩代码 勾选 

实测 点击后 从3m+ 缩小到了 2m+ 主要缩小的是 vendor.js 


2.静态资源尽量放到服务器上 和公司后端人员沟通 将图片地址尽量放到服务器上 就不占用本地资源空间


3.微信小程序分包 

首先看下uniApp官方文档说明 - > https://uniapp.dcloud.io/collocation/pages?id=subpackages

我目前的项目结构大概是这样的 ->

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─playMent
│     └─playMent.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json            

在和pages平级下 有一个pagesA  里面有一个文件夹 playMent 里面有他的vue文件

在Page.json中对分包路径进行配置 


这个subPackages 和 其他的tabBar、globalStyle 是平级 
//分包配置
	"subPackages": [{
		"root": "pagesA",
		"pages": [{
			"path": "playMent/playMent",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			}
		}]
	}],
	"preloadRule": {
		"pagesA/playMent/playMent": {
			"network": "all",  //指定在任何网络下都执行预下载分包
			"packages": ["__APP__"]  //App表示进入主包后立即预下载分包 可配置具体进入到哪个分包页面在进行下载
		} 
	}



配置好后 就可以开始尝试从主包页面跳转到 分包了 

路径要注意 - >

// 携带id跳转到支付页面
u.route 是我使用的uViewUi封装好的一些api 和原生的uni路由跳转一样

			this.$u.route({
				url:'/pagesA/playMent/playMent',
				type:'to',
				params:{
					id:item.id
				}
			})