wepy開發微信小程序上存在的優化

一、預加載與欲查詢

傳統 H5 在啓動時，page1.html 只會加載 page1.html 的頁面與邏輯代碼，當 page1.html 跳轉至 page2.html 時，page1 所有的 Javascript 數據將會從內存中消失。page1 與 page2 之間的數據通信只能通過 URL 參數傳遞或者瀏覽器的 cookie，localStorge 存儲處理。

小程序在啓動時，會直接加載所有頁面邏輯代碼進內存，即便 page2 可能都不會被使用。在 page1 跳轉至 page2 時，page1 的邏輯代碼 Javascript 數據也不會從內存中消失。page2 甚至可以直接訪問 page1 中的數據。

最簡單的驗證方式就是在 page1 中加入一個 setInterval(function () {console.log(‘exist’)}, 1000)。傳統 H5 中跳轉後定時器會自動消失，小程序中跳轉後定時器仍然工作。

小程序的這種機制差異正好可以更好的實現預加載。通常情況下，我們習慣將數據拉取寫在 onLoad 事件中。但是小程序的 page1 跳轉到 page2，到 page2 的 onLoad 是存在一個 300ms ~ 400ms 的延時的。如下圖：

因爲小程序的特性，完全可以在 page1 中預先拿取數據，然後在 page2 中直接使用數據，這樣就可以避開 redirecting 的 300ms ~ 400ms 了。

預加載數據

用於 page1 主動傳遞數據給 page2，比如 page2 需要加載一份耗時很長的數據。我可以在 page1 閒時先加載好，進入 page2 時直接就可以使用。

// page1.wpy 預先加載 page2 需要的數據。

methods: {
  tap () {
    this.$redirect('./page2');
  }
},
onLoad () {
  setTimeout(() => {
    this.$preload('list', api.getBigList())
  }, 3000)
}

// page2.wpy 直接從參數中拿到 page1 中預先加載的數據
onLoad (params, data) {
  data.preload.list.then((list) => render(list));
}

預查詢數據

用於避免於 redirecting 延時，在跳轉時調用 page2 預查詢。
擴展了生命週期，添加了 onPrefetch 事件，會在 redirect 之時被主動調用。同時給 onLoad 事件添加了一個參數，用於接收預加載或者是預查詢的數據。

// page1.wpy 使用封裝的 redirect 方法跳轉時，會調用 page2 的 onPrefetch 方法
methods: {
  tap () {
    this.$redirect('./page2');
  }
}

// page2.wpy 直接從參數中拿到 onPrefetch 中返回的數據
onPrefetch () {
  return api.getBigList();
}
onLoad (params, data) {
  data.prefetch.then((list) => render(list));
}

二、避免頁面內引用多餘的組件

前端語言大多面向組件開發的，也就是說一個界面通常都是由許多組件組成的，這個觀點是沒什麼問題。但是，如果一個界面裏面引用了大量的組件，而其中有一部分在某種情況下不顯示（也就是使用過當前頁面裏的某種條件來選擇是否顯示某些組件）。這樣做，雖然說也體現的是組件化開發，但是對於性能的影響是巨大的。舉個例子：如果我們直接將頁面裏面的佈局部分全部刪除，只是簡單的將組件引進當前文件，然後放進components中，觀察編譯的代碼，wxml文件內容沒了，js文件沒有任何變化。也就是說，只要你將組件放進components中，必將會將js代碼引入。js代碼引入，便會去執行組件的生命週期函數（如果某些組件的生命週期函數中存在耗時的操作，而這個組件又不需要顯示，豈不是浪費資源影響性能）。
總結一下，wepy組件化開發並沒有問題，前提是我們要儘量去保證引進來的組件是需要顯示的，否則影響性能。