部分原文: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