小程序优化方案

最近一直在做小程序，开始的时候因为项目太急，功能模块很少，权衡之下选择了原生的小程序开发模式。然后随着功能迭代，小程序的大小又有限制，所以决定开始尽可能的优化项目。下面是用到的一些优化方案：

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，可以尽量优化代码，删除无用代码实现优化。

6.压缩本地图片

使用ImageOptim，将本地图片压缩，会减少一部分包的大小。还有就是，在项目有引入本地较大的图片，可将图片转为.jpg格式，也可以压缩代码包大小；