微信小程序每个分包的大小是2M，总体积一共不能超过20M。用uniapp开发的微信小程序，同样也会遇到包体积大的问题，那怎么解决呢？其实常规有以下几种操作：
- 采用分包，参考uniapp分包文档。分包还算简单，只要照着文档来就行了，最大的缺点是要修改项目的目录结构。
- 使用智能有损压缩技术来减少图片大小，推荐免费的在线的压缩工具 tinypng。有损压缩，多少会有失真的，越高清失真越严重。
- 删除无用代码和文件，这是一个费时费力的工作，有可能忙到最后到头来，包没有小多少 -_-。
如果我们使用uniapp开发的程序，打包小程序体积大是因为static目录的图片资源过大的话，我们可以使用终极解决办法——将static的图片上传到dcloud云空间的“前端网页托管”上去，小程序使用链接的形式来下载使用图片。这样做还有一个好处，就是可以解决小程序无法使用大于40k的图片作为背景的问题。当然，前提是我们得有一个备案了的域名。为了同时支持App版本和小程序，即是同一套代码两种版本而且不改代码目录结构，我们得用条件编译来定义static目录变量区别来处理。
一、处理JS和vue中的图片引用
1、定义JS全局变量
定义js全局变量，
// static全局属性
Vue.prototype.staticDir = '../../static'; // 改成自己的相对路径或者绝对路径
// #ifdef MP-WEIXIN
Vue.prototype.staticDir = 'https://www.xxxxxxxxx.com/h5/static';
// #endif
Vue.prototype.getStaticFilePath = function (url) {
return Vue.prototype.staticDir + url;
};
2、替换vue中的图片地址
假设我们引用的图片地址是下面这样的：
<view class="test">
<image src="../../static/images/index/jb.png"></image>
</view>
我们修改src成这样即可：
<view class="test">
<image :src="getStaticFilePath('/images/index/jb.png')"></image>
</view>
当然，我们可以使用正则表达式来全局替换，替换src="[^"]*static/([^"]*)" 成:src="getStaticFilePath('\1')"
二、处理css中的图片引用
uniapp根目录下有一个特殊的文件uni.scss，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。我们将scss的static目录变量放到这里，即可全局使用了。
1、定义scss全局变量
在uni.scss的最后添加：
/* static资源路径 */
$uni-static-dir: "~@/static/";
/* #ifdef MP-WEIXIN */
$uni-static-dir: "https://www.xxxxxxxx.com.cn/h5/static/";
/* #endif */
遗憾的是，这个uni.scss有bug，并不支持条件编译，所以我们打包小程序得手动修改这个文件。这里还是写上条件编译，等uni.scss的bug修复了，我们就不用修改了。
2、css文件改名成scss文件
将原来的css文件改名成scss文件，并像下面这样修改vue中的引用。加上了lang="scss"和去掉import语句中的url函数。
<style lang="scss">
// @import url("./msg.css");
@import "./msg.scss";
</style>
3、替换css中的图片地址
.lefticon {
width: 58rpx;
height: 58rpx;
background-image: url(../../static/imags/settings/fh.png);
background-size: cover;
}
.lefticon {
width: 58rpx;
height: 58rpx;
background-image: url($uni-static-dir+"/imags/settings/fh.png");
background-size: cover;
}
当然，我们也可以使用正则表达式来全局替换，替换 url\(.*static/(.*\.png)\) 成 url($uni-static-dir+"\1") 。
三、开启前端托管
如果你是使用其他图片网站或者CDN，跳过这一步。开启前端托管这个在uniapp官方文档(前端网页托管 - uni-app官网)已经写的很详细了，这里就不赘述了。
四、开始发布
1、上传图片资源到前端网页托管
如果你是使用其他图片网站或者CDN，跳过这一步，使用自己的方式上传static的资源。打包前，先注释掉uni.scss文件中的微信小程序的static目录变量，因为uni.scss还不支持条件编译：
/* static资源路径 */
$uni-static-dir: "~@/static/";
/* #ifdef MP-WEIXIN */
// $uni-static-dir: "https://www.xxxxxxxx.com.cn/h5/static/";
/* #endif */
接下来，在HBuilderX的发行菜单，点击“网站-PC Web或手机H5(仅适用于uni-app)”。需要填写上一步的域名，并勾选“将编译后的资源部署到前端网页托管”，如下图：
2、打包小程序
打包前，先去掉uni.scss文件中的微信小程序的static目录变量的注释。由于我们的static目录的资源在打包时会自动打包进去，尽管我们代码没有用到，所以我们先将static目录的删除或者移到别的文件夹。在HBuilderX的发行菜单，点击“小程序-微信(仅适用于uni-app)”来开始打包。
网友评论