小程序优化实践

对小程序的一些原理和异同点,可以移步上一篇文章: 小程序那些你可能不知道的事

基于实际优化数据总结下这篇文章.废话不多说,我们直接进入正题吧

相信关注小程序的朋友们,对这张图片一定不陌生。 经过大量的测试; 首屏时间的长短,和资源准备有密不可分的关系。

换句话说,如果我们想加快首屏的渲染速度,就得严格控制初次加载包的大小。如何控制包大小,可以从下面2个方面进行控制:

  1. 分包加载
  2. 压缩包

经过各种处理之后,我们得出的结果是下面这样子

一开始,考虑到项目较小,没有采取分包模式,后来,需求越来越多……代码量越来越多, 所以说,不要总感觉项目一开始很简单,什么都不用,最好还是别偷懒,该规划的规划,不然到后期改来改去会想哭。

把用户可能第一次进入就点到的页面放在主包中,其余放在分包中。如下目录

├─pages          小程序主包页
  ├─……                  
├─subPages       子包内容
  ├─……   
复制代码

然后,我们在 app.json 中分包配置好主包和分包

{
    "pages": [
        "pages/index/index"
    ],
    "subPackages": [
        {
            "root": "subPages",
            "pages": [
                "pages/fenbao/fenbao"
            ]
        }
    ]
}
复制代码

这样就大功告成了。不过分包什么时候加载?

如果等到用户进入分包再进行加载,就实在太慢了,还好官方给出了预加载的配置。如下:

{
    "preloadRule": {
        "pages/index/index": {
            "network": "all",
            "packages": [
                "subPages"
            ]
        }
    }
}
复制代码

上面表示,我进到 pages/index/index 页面的时候,就开始预加载分包 subpages 里面的内容。这样一折腾,进入分包的时候,感知也不是很明显。

但是,坑来了,一开始,采用的目录是下面这样子的,我们直接用下面的目录在小程序上运行,上传预览。

├─pages            小程序主包页
  ├─……                  
├─subPages         子包内容
  ├─……          
├─app.js           入口文件
├─app.json         配置文件
├─app.css          主 CSS 文件
├─config 	   gulp 配置文件
├─gulpfile.js      gulp 文件
复制代码

后来我们发现,小程序其实很傻很天真,它把该目录的所有文件都一股脑上传上去,也就是用户要使用这个小程序,它也需要额外下载 config 文件夹 和 gulpfile.js 这些对运行时无用的代码。

因此,把上面的目录重新调整一波,变成下面这个样子,小程序运行选取 src 目录

├─src                 源码    // 重点关注这里
  ├─pages             小程序页面
    ├─....
  ├─subPages          子包内容
    ├─....
  ├─app.js            入口文件
  ├─app.json          配置文件
  ├─app.css           主 CSS 文件...
├─gulpfile.js         gulp 文件  // 重点关注这里
├─config              gulp 配置文件  // 重点关注这里
复制代码

这样一体验,速度快了,腰不疼了,头发也不掉了。不过感觉还是比较慢的,再压缩一波代码吧。虽然小程序官方说勾选自动压缩代码,会帮我们进行压缩,但是不知道为啥,并木有…… 自己再压缩操作一波,速度又明显提快了。

很简单,采用 gulp 进行一波操作,最主要还是压缩一波图片,去除掉相关注释等等,代码比较简单

gulp.src('./src/**/*.wxml').pipe(stripComments()).pipe(gulp.dest(distPath))
gulp.src('./src/**/*{.png,.jpg,.gif,.svg}').pipe(imagemin({ progressive: true })).pipe(gulp.dest(distPath))
复制代码

至于第三张图,接口缓存等等,网上一大堆资料,就不在这里献丑了~

@Author: beidan

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值