小程式優化實踐

黑金團隊發表於2018-11-29
優化

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

基於實際優化資料總結下這篇文章.廢話不多說，我們直接進入正題吧

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

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

相關文章