1. 程式人生 > >小程式優化實踐

小程式優化實踐

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

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

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

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

至於第三張圖,介面快取等等,網上一大堆資料,就不在這裡獻醜了~