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

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.代码包分包加载

详见小程序启动