小程序优化实践

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

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

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

换句话说，若是咱们想加快首屏的渲染速度，就得严格控制初次加载包的大小。如何控制包大小，能够从下面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