小程序uni-app分包優(yōu)化、頁面預加載、頁面跳轉(zhuǎn)封裝

優(yōu)化

因小程序有體積和資源加載限制，各家小程序平臺提供了分包方式，優(yōu)化小程序的下載和啟動速度。在小程序啟動時，默認會下載主包并啟動主包內(nèi)頁面，當用戶進入分包內(nèi)某個頁面時，會把對應(yīng)分包自動下載下來，下載完成后再進行展示。



一、分包優(yōu)化

注意：

subPackages 里的pages的路徑是 root 下的相對路徑，不是全路徑。

微信小程序每個分包的大小是2M，總體積一共不能超過16M。

分包下支持獨立的 static 目錄，用來對靜態(tài)資源進行分包。

uni-app內(nèi)支持對微信小程序、QQ小程序、百度小程序、支付寶小程序、字節(jié)小程序(HBuilderX 3.0.3+)分包優(yōu)化，即將靜態(tài)資源或者js文件放入分包內(nèi)不占用主包大小。

針對vendor.js過大的情況可以使用運行時壓縮代碼

HBuilderX創(chuàng)建的項目勾選運行–>運行到小程序模擬器–>運行時是否壓縮代碼

cli創(chuàng)建的項目可以在package.json中添加參數(shù)–minimize，示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”

1.目錄

pages是我們的主包，里面有登錄頁和index開頭的3個底部tabBar選項卡頁面。pagesOther里面是我們的分包，里面有個人中心的一些訂單和消息頁面。

注意：tabBar 頁面以及引用的頁面都需要放在主包，靜態(tài)文件夾名為 static

┌─pages               

│  ├─index

│  │  └─index.vue    

│  ├─index2

│  │  └─index2.vue    

│  ├─index3

│  │  └─index3.vue    

│  └─login

│     └─login.vue    

├─pagesOther

│  ├─static

│  └─personal

│     └─order.vue

│     └─message.vue

├─static             

├─main.js       

├─App.vue          

├─manifest.json  

└─pages.json            

2.分包配置

修改 mainfest.json 配置，點擊源碼視圖，在 mp-weixin 中加入以下代碼

修改 pages.json 配置，在 pages 同級下新增 subPackages，分包中配置了 page 路徑后，主包 pages 中就不需要了

"pages": [
  // 登錄
  {
    "path": "pages/login/login",
    "style": {
      "navigationBarTitleText": "登錄"
    }
  },
  // 選項卡
  {
    "path": "pages/idnex1/idnex1",
    "style": {
      "navigationBarTitleText": "選項卡一"
    }
  },
  {
    "path": "pages/idnex2/idnex2",
    "style": {
      "navigationBarTitleText": "選項卡二"
    }
  },
  {
    "path": "pages/idnex3/idnex3",
    "style": {
      "navigationBarTitleText": "選項卡三"
    }
  }
   ],
"subPackages": [{
  "root": "pagesOther",  // 分包名稱
  "pages": [
    // 省略無數(shù)個頁面路徑
    ...
    // 個人中心
    {
      "path": "personal/order",
      "style": {
        "navigationBarTitleText": "訂單"
      }
    },
    {
      "path": "personal/message",
      "style": {
        "navigationBarTitleText": "消息"
      }
    }
   ]
}],
3.頁面預加載






配置preloadRule后，在進入小程序某個頁面時，由框架自動預下載可能需要的分包，提升進入后續(xù)分包頁面時的啟動速度

在剛剛 pages.json 中繼續(xù)添加 preloadRule 預加載配置

packages：表示進入 pages/index/index1 這個頁面后加載pagesOther這個分包，值為 __APP__ 時表示主包

network：在指定網(wǎng)絡(luò)下預下載，可選值為：all（不限網(wǎng)絡(luò)）、wifi（僅wifi下預下載）

"preloadRule": {
  "pages/index/index1": {
    "network": "all",
    "packages": ["pagesOther"]
  }
},
然后我們可以看下運行時的依賴分析


二、頁面跳轉(zhuǎn)

類似HTML中的 <a> 組件，但只能跳轉(zhuǎn)本地頁面。目標頁面必須在pages.json中注冊

1.UNI跳轉(zhuǎn)方法

uni方法進行跳轉(zhuǎn)

uni.navigateTo

保留當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用uni.navigateBack可以返回到原頁面

uni.redirectTo

關(guān)閉當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面

uni.reLaunch

關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面

uni.switchTab

跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面

uni.navigateBack

關(guān)閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層

uni.preloadPage

預加載頁面，是一種性能優(yōu)化技術(shù)。被預載的頁面，在打開時速度更快


2.封裝為vue方法

我們可以自己封裝為Vue方法，來調(diào)用跳轉(zhuǎn)與傳參跳轉(zhuǎn)

var utils = {};
//公共處理方法
utils.install = function(Vue, option) {
  // 頁面跳轉(zhuǎn)
  Vue.prototype.jump = function(path) {
    uni.navigateTo({
      url: path
    })
  };
  // 返回
  Vue.prototype.back = function(obj) {
  uni.navigateBack(obj);
  };
  // 帶參跳轉(zhuǎn)
  Vue.prototype.togo = function(url,data){
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    uni.navigateTo({  
      url
    })
  };
  function param(data) {
    let url = ''
    for (var k in data) {
      let value = data[k] !== undefined ? data[k] : ''
      url += '&' + k + '=' + encodeURIComponent(value)
    }
    return url ? url.substring(1) : ''
  };
  // 獲取登錄用戶
  Vue.prototype.getUserInfo = function() {
  let res = uni.getStorageSync('userInfo');
  if (res) {
    return res
  } else {
    return {}
  }
  };
};


export default utils;
在 main.js 中use一下就可以在頁面用了

import utils from './common/util.js'
Vue.use(utils)
攜帶 userid 跳轉(zhuǎn)到 order 頁面

togoOrderList(userid) {
  this.togo('/pagesOther/personal/order',{userId: userid})
}


當然也可以使用uni三方組件進行頁面跳轉(zhuǎn)







作者：小碼哥

歡迎關(guān)注微信公眾號 ：碼出宇宙

掃描添加好友邀你進技術(shù)交流群，加我時注明【姓名+公司(學校)+職位】