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');
}

加上去，完美解决。

如有问题，欢迎留言。

uniapp打包静态资源优化相关推荐

中大型网站静态资源优化及存储
为什么80%的码农都做不了架构师?>>> 静态资源优化: 合并减少http请求有这样几个优点: (1) 减少DNS请求所耗费的时间 (2) 减少服务器压力(CPU,IO) ( ...
Nginx静态资源优化配置之sendfile
静态资源优化配置语法 Nginx对静态资源如何进行优化配置.这里从三个属性配置进行优化: sendfile on; tcp_nopush on; tcp_nodeplay on; (1)sendﬁle ...
nginx 静态资源优化配置
前言在很多公司,nginx不仅作为反向代理服务器使用,而且承载着一部分静态资源存储的功能,比如将图片等静态资源放在nginx目录下,比较熟悉的是,在一些前后端分离的网站中,某些情况下,为了能充分提升 ...
react不同环境不同配置angular_DevOps 前端项目(angular、vue、react)打包静态资源生成一份Docker镜像支持部署不同环境...
1.前言为了尽可能地轻量化前端镜像(非node承载),将前端编译成静态资源通过nginx承载. 与后端程序不同的是,当使用静态资源方式时页面是直接加载到浏览器进行渲染,无法读取服务端机器中 env ...
Nginx静态资源优化配置之tcp_nopush和tcp_nodelay
(2)tcp_nopush:该指令必须在sendfile打开的状态下才会生效,主要是用来提升网络包的传输'效率' 语法 tcp_nopush on|off; 默认值 tcp_nopush oﬀ; 位置 ...
gin embed打包静态资源文件
问题在gin项目中如果单纯的只是实现api接口,那打包出来的是一个可执行文件.但如果项目中如果包含一些页面,则必定会引入一些css,jss,html文件.这样会使打包出来后会挂着对应的静态资源文件夹 ...
Nginx静态资源优化、压缩、缓存
这一篇记录一下Nginx压缩缓存相关的指令,各位看到此博客的小伙伴,如有不对的地方请及时通过私信我或者评论此博客的方式指出,以免误人子弟.多谢! 目录优化 sendﬁle tcp_nopush tc ...
【Unity性能优化】静态资源优化——Audio优化
文章目录写在前面 1. 前言 2. 使用Asset Checker进行资源检测 3. Audio优化 3.1 启用Force to Mono 3.2 压缩格式与采样率 3.3 音乐加载类型 3.4 ...
Webpack4 学习笔记 - 02：loader 打包静态资源（图片）
什么是 loader? 看官网的解释:loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript).loader 可以将所有类型的 ...

uniapp打包静态资源优化

uniapp打包静态资源优化相关推荐

最新文章

热门文章