小程序優化實踐

對小程序的一些原理和異同點，能夠移步上一篇文章： 小程序那些你可能不知道的事

基於實際優化數據總結下這篇文章.廢話很少說，咱們直接進入正題吧

相信關注小程序的朋友們，對這張圖片必定不陌生。 通過大量的測試； 首屏時間的長短，和資源準備有密不可分的關係。

換句話說，若是咱們想加快首屏的渲染速度，就得嚴格控制初次加載包的大小。如何控制包大小，能夠從下面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