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

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

总：

猜你喜欢

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