最近一直在做小程式，開始的時候因為專案太急，功能模組很少，權衡之下選擇了原生的小程式開發模式。然後隨著功能迭代，小程式的大小又有限制，所以決定開始儘可能的優化專案。下面是用到的一些優化方案：

1. wx:if vs hidden

    小程式官方文件中描述，wx:if如果在初始渲染條件為false時，框架什麼耶不會做，只有當值變為真時，才開始區域性渲染。hidden只是簡單的控制顯示與隱藏，元件始終會被渲染。wx:if有更高的切換消耗，而hidden有更高的初始渲染消耗。

    針對上面的描述，我將專案中之前用到的頻繁切換顯示與隱藏狀態的input框，以及上拉載入更多的loading展示，把判斷顯示條件從wx:if換成了hidden。

<view class="component-loading" hidden="{{!bottomDataloading}}">
  <template is="template-loading-line-scale" data="{{color: '#ccc'}}" />
</view>
  
<view
  hidden="{{!showInput}}"
  class="add-comment-control {{isIphoneX ? 'add-comment-control-iphonex' : ''}}"
  style="bottom: {{keyboardHeight}}px">
  <input
    value="{{commentText}}"
    bindfocus="handleCommentFocus"
    bindblur="handleCommentBlur"
    cursor-spacing='{{0}}'
    bindconfirm="handleCreateComment"
    focus="{{focus}}"
    type="text"
    placeholder="{{placeholder}}"
    adjust-position="{{false}}"
    confirm-type="send"
    class="write-comment" />
</view>
 

2.小程式中多張圖片懶載入方案

    由於小程式對使用者記憶體使用進行了限制，如果一個頁面的圖片過多，會導致記憶體不足的內部錯誤。我在專案中用到的優化方案是：使用scroll-view實現分屏載入，然後給未載入的圖片設定預設圖片。

<scroll-view 
  class="select-right {{isIphoneX?'select-right-X':''}}"
  scroll-y
  scroll-with-animation
  scroll-top="{{scrollTop}}">
  <view class="select-right-list">
    <view class="select-rg-li" bindtap="toggleCheck" wx:for="{{bookList[tabIndex].items}}" wx:key="{{index}}" data-book="{{item}}" >
      <image class="select-rg-li-cover" src="{{item.cover && item.cover.wxApp ? item.cover.wxApp : '/assets/images/bmylogo.png'}}" mode="aspectFill"></image>
      <text>{{item.title}}</text>
      <view class="select-rg-li-check {{item.selected?'select-rg-li-checked':''}}"><image src="{{item.selected ? '/assets/images/selected.png' : ''}}"></image></view>
    </view>
  </view>
</scroll-view>
 

    最簡單的方法，小程式文件中有新增image的lazy-load屬性，當值為true時生效，注意：只針對page與scroll-view下的image有效。

3.input狀態下隱藏input

    在input隱藏時，為了提升使用者體驗，建議先讓鍵盤隱藏，大概500ms之後，再將input框進行隱藏。

4.setData優化

    儘量避免頻繁的去setData資料；

    儘量避免每次setData大量資料（單次設定的資料不能超過1024kb）；

    不要把data中任一項的value設為undefined，否則這一項將不被設定並可能遺留一些潛在問題；

    當頁面進入後臺之後，不應該再繼續執行setData.

5.優化程式碼包大小

    小程式程式碼包限制為2M，資源包4M，可以儘量優化程式碼，刪除無用程式碼實現優化。小程式官方文件中提供了一些常規的控制程式碼包大小的方法：

    1.精簡程式碼，去掉不必要的WXML結構和未使用的WXSS定義；

    2.減少在程式碼包中直接嵌入的資原始檔；

    3.壓縮圖片，使用適當的圖片格式。

6.壓縮本地圖片或將本地圖片上傳至伺服器

    使用ImageOptim，將本地圖片壓縮，會減少一部分包的大小。還有就是，在專案有引入本地較大的圖片，可將圖片轉為.jpg格式，也可以壓縮程式碼包大小；另一種方式，可以將本地圖片上傳至伺服器，使用連結引入的方式顯示圖片。

7.程式碼包分包載入

詳見小程式啟動