小程序优化实践

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

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

换句话说，如果我们想加快首屏的渲染速度，就得严格控制初次加载包的大小。如何控制包大小，可以从下面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))
复制代码

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