微信小程序原生开发的性能优化策略

分包优化

微信小程序的分包可以将应用程序拆分成多个子包，从而可以按需加载和更新子包。
子包或分包是引用主包的资源，例如JS脚本、WXML模板和WXSS样式表文件的一个集合。

如何设置分包？

要设置分包，请在小程序的app.json文件中添加subpackages或subPackages属性，以指定应用程序的子包目录。每个子包都必须至少包含一个页面。子包可以按照自己的需求，可以是拥有多个页面或简单的组件库，视情况而定。

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

分包优点

分包还可以用于更好的管理和调整小程序资源，以优化性能。例如，可以将较大的资源放入独立的子包中，从而减少主包的体积，加快启动时间。还可以定期更新子包以提高小程序的性能和稳定性。

注意事项

在使用分包时，需要注意以下几点：

每个分包都必须至少包含一个页面。
分包的路径必须在小程序根目录下，遵循小程序规定的路径结构。
分包和主包之间不能重复，否则可能会导致性能问题和资源冲突。
分包会增加小程序的复杂度和管理难度，需要在开发中仔细规划和管理。

分包预加载

分包预加载是一种优化小程序性能的技术，在用户访问分包前提前加载分包的资源，从而减少用户等待时间和提高用户体验。

如何开启分包预加载？

要开启分包预加载，需要在小程序的app.json文件中添加preloadRule属性，以指定预加载的规则。可以根据需求指定哪些分包需要预加载，以及在何时需要预加载。

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

分包预加载优化

为了更好的利用分包预加载，可以考虑一些优化策略：

1. 将加载时间较长的资源放在分包中，并将分包设置为预加载。
2. 可以利用小程序提供的wx.loadSubPackage()方法手动触发分包预加载，以提高用户体验。
3. 在分包资源的加载区间内显示loading动画，以缓解用户等待。

注意事项

在使用分包预加载时，需要注意以下几点：

需要仔细考虑和规划哪些分包需要预加载，加载规则需要遵循小程序规定的路径结构和逻辑关系。
预加载资源需要耗费一定的网络流量和设备性能，需要根据用户网络环境和设备条件进行调整。
仅在分包体积或加载速度较慢时使用预加载。

setData

当我们在微信小程序开发中需要更新数据时，可以使用setData()方法。setData()是用来改变这个页面数据的方法。

this.setData({
  name: '小明'
})

优化setData()方法的技巧

1. 避免使用setData()方法更新不必要的数据。只有在需要更新的数据发生变化时，才应该使用setData()方法。
2. 使用批量更新setData()方法。这样可以减少多次setData()调用的次数，从而减少性能问题。可以将需要更新的数据一次性传递给setData()方法。

// 定义一个对象，包含需要更新的所有数据变量
const data = {
  name: "Mike",
  age: 25
};

// 调用setData()方法，并将data对象作为参数传入
this.setData(data);

1. 对于大量数据的更新，可以考虑使用云函数进行处理，以减轻客户端的负担。

2. 对于需要频繁更新的数据，可以使用WXS（小程序中的一种脚本语言）或持久化存储方式，减少setData()方法的调用次数。

3. 使用虚拟列表技术，当数据量过大时，只渲染可见区域的内容，从而提高渲染速度。

WXS

WXS是小程序中的一种脚本语言，可以在wxml中嵌入JavaScript代码，用于数据处理和模板渲染等。使用方法如下：

1. 在wxml文件中，使用标签引入WXS脚本代码块，并通过module属性指定模块名称。
2. 在WXS脚本中，可以定义变量、函数和对象等。使用module.exports将定义的变量和函数等导出，以便在wxml中使用。
3. 在wxml中，使用{{}}插值语法调用WXS中的函数和变量等。注意要使用模块名称作为标识符，例如，module.variable。
4. 可以通过include标签引入WXS脚本文件，避免多个wxml页面中重复定义相同的WXS代码。

举例如下：

<wxs module="calc">
  var num1 = 0
  var num2 = 0
  var result = 0
  
  function add() {
    result = num1 + num2
    return result
  }
  
  function onInput(event) {
    if (event.target.id === 'num1') {
      num1 = parseInt(event.detail.value) || 0
    } else if (event.target.id === 'num2') {
      num2 = parseInt(event.detail.value) || 0
    }
    this.setData({
      result: add()
    })
  }
  
  module.exports = {
    onInput: onInput
  }
</wxs>