uniapp打包静态资源优化

HBuilderx打包是对包的大小有限制的，一般不能超过40M，超过40M则需要缴费打包，好像十块钱一次，虽然不贵，但是长此以往也是一笔不小的费用，且不是解决根源问题的处理方式。

此时，没钱的前端只好想法设法地压缩包的大小，为此我找了很多方法，记录于此：

仔细地观察了文件中比较大比较占资源的就是图片和字体文件所占的比重较大，代码基本都很小，所以应当将优化静态资源作为优化方向。

方法1：分包 参考官网：uni-app官网

 我做的是app，官网说明不支持app和h5的分包设置，只支持几个小程序。。绝望。。

方法2：将本地图片传到服务器上，用网络地址，直接访问服务器。这样本地不用打包本地的静态资源包了。我是将图片和字体文件都上传到华为云上面的，会得到一个地址

$obsURLFont: 'https://xxx';

$PF-SC-Rfamily:"PingFang-SC-Regular";

@font-face {
    font-family: "PingFang-SC-Regular";
	src: url($obsURLFont + 'PingFang Regular.ttf');
}

将图片和字体文件都这样处理之后，原本147M的包打出来只有12M，大大地减少了包的大小，是个有非常显著效果的解决方式。但是这样的方式也是有弊端的：如果网络太差，加载图片的就很卡顿，用户体验性就很差；并且打出来的app并不会缓存加载过的图片和字体，意思就是每次加载都要重新加载整个页面。

于是又想到一个处理方式：手动缓存。

// val = DIN-Bold.otf
getFontUrl(val) {
	let fontUrl = uni.getStorageSync(val);
	if (fontUrl == '') {
		let url = "https://xxx(下载的网络地址)" + val;
		let dtask = plus.downloader.createDownload(url, {
				//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，就是用户文件管理器能看到的了，之后我创建微垠作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
				filename: "file://storage/emulated/0/DCIM/bwy/font/" + val //利用保存路径，实现下载文件的重命名
			},
			function(d, status) {
				//d为下载的文件对象
				if (status == 200) {
			        //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
					// let fontUrl = plus.io.convertLocalFileSystemURL(d.filename);
					let fontUrl = d.filename;
					uni.setStorageSync(val, fontUrl);
					console.log(uni.getStorageSync(val))
				} else {
					plus.downloader.clear(); //下载失败,清除下载任务
				}
			})
		dtask.start();
	}
	return fontUrl;
}

 整个App启动时就判断所要使用的字体文件是否存在，如果不存在就先下载到本地，这里可以直接自定义下载的目录，将下载后的路径存在本地；如果存在，则可直接使用本地地址。

在这里出现使用下载后的本地地址无效的问题要注意了，当时困扰了我很久，我一直以为app没有读取本地文件的权限，我打开权限之后还是没有字体的效果，于是又查了很多资料，皇天不负有心人，终于找到了

 对应的本地路径居然有三个斜杠？？！！

$obsURLFont: 'file:///storage/emulated/0/DCIM/bwy/font/';

$PF-SC-Rfamily:"PingFang-SC-Regular";

@font-face {
    font-family: "PingFang-SC-Regular";
	src: url($obsURLFont + 'PingFang Regular.ttf');
}

加上去，完美解决。

如有问题，欢迎留言。