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

部分原文：uniApp 开发小程序 减少打包体积_uniapp压缩代码_Nomal_1bit的博客-CSDN博客

随着开发页面越来越多 . 部分的静态资源图片也越来越多 导致项目体积比较大 
 
以下以微信小程序举例  限制了每个包的大小为2m，1m=1024kb，导致无法真机调试和发布  
 
所以产生了一个问题 缩小代码体积
 
本人目前已知的办法有4个
 
 
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"
			}
		},
        {
		"root": "pagesB",
		"pages": [{
			"path": "playMent/playMents",
			"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
				}
			})
 

4：包内容分开

如果uniapp内部写的代码发布平台有不同小程序、h5、app。那么不同平台的包需要打包在自己的平台，例如微信小程序的包不应该有h5页面链接，则可以在pages.json中写入

// #ifdef H5
			{
				"path": "h5/tride",
				"style": {
					"app-plus": {
						"titleNView": false
					}

				}
			},
// #endif

如果页面内部则需设置页面ifdef部分内容配置。

• subPackages 里的pages的路径是 root 下的相对路径，不是全路径。
• 微信小程序每个分包的大小是2M，总体积一共不能超过20M。

总：

因为微信限制，所以可以做分包区分，分包除了可以分代码，还可以把static分包，但是分包代码可以采用下面4的方法用条件编译分开，但是static不行。即使分包也是会被打进编译包内，所以可以代码和static都做分包处理，并且代码做条件编译处理，static图片资源过大的采用上传采用链接形式，webp格式会更好一些，质量好，内存小

或者使用智能有损压缩技术来减少图片大小，推荐免费的在线的压缩工具 tinypng。有损压缩，多少会有失真的，越高清失真越严重。

图片这里采用的有一个可以考虑https://www.jianshu.com/p/b5247da27d65​​​​​​​