Boost WeChat Mini Program Performance: 12 Proven Optimization Techniques

WeChat Mini Programs have become an important carrier for enterprise mobile products, but as features grow, performance optimization becomes increasingly crucial. Here are common performance optimization tips to help developers improve Mini Program efficiency.

1. First‑Screen Load Optimization

First‑screen load speed directly impacts user experience; you can optimize it by:

// 使用分包加载
{
  "pages": ["pages/index/index"],
  "subpackages": [{
    "root": "packageA",
    "pages": ["pages/detail/detail"]
  }]
}

Reasonably use subpackage loading

Control home page resource size

Preload subpackage content

2. Data Preloading

Requesting data in advance can noticeably improve user experience:

// app.js
App({
  onLaunch() {
    wx.preloadData({
      url: 'api/home/data',
      success: (res) => {
        this.globalData.homeData = res.data
      }
    })
  }
})

3. Image Resource Optimization

Images are often the main factor affecting performance:

Use CDN to accelerate image loading

Adopt WebP format

Implement lazy loading

Compress image quality appropriately

4. setData Optimization

Reduce the frequency and amount of setData calls:

// 优化前
data.list.forEach((item, index) => {
  this.setData({
    [`list[${index}].checked`]: true
  })
})

// 优化后
const newList = data.list.map(item => ({
  ...item,
  checked: true
}))
this.setData({ list: newList })

5. Avoid Improper Use of onPageScroll

Page scroll events need careful handling:

// 使用节流处理滚动事件
const throttle = (fn, delay) => {
  let timer = null
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args)
        timer = null
      }, delay)
    }
  }
}

Page({
  onPageScroll: throttle(function(e) {
    // 滚动处理逻辑
  }, 200)
})

6. Use createSelectorQuery Optimization

Reasonably use node queries:

const query = wx.createSelectorQuery()
query.select('#target').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res) {
  const targetTop = res[0].top
  const scrollTop = res[1].scrollTop
})

7. Proper Use of Component Lifecycle

Choose appropriate lifecycle to handle business logic:

8. Use wx:key to Optimize List Rendering

Correct use of key improves list performance:

9. Reasonable Use of Cache

Appropriately use cache to reduce requests:

10. Avoid Improper Timers

Manage timers reasonably:

11. Use IntersectionObserver Optimization

Monitor element visibility:

12. Optimize Network Requests

Handle network requests properly:

const request = (url, options = {}) => {
  return new Promise((resolve, reject) => {
    const token = wx.getStorageSync('token')
    wx.request({
      url,
      ...options,
      header: {
        'Authorization': token,
        ...options.header
      },
      success: resolve,
      fail: reject
    })
  })
}

Feel free to add more.