Performance optimization strategies for mini-programs

Core Objectives of Performance Optimization

The core of Mini Program performance optimization lies in enhancing user experience by reducing loading times, minimizing memory usage, and improving rendering efficiency. Key metrics include First Paint Time (FPR), page transition smoothness, and memory consumption. By analyzing the Mini Program's operational mechanisms, optimizations can be made across multiple dimensions such as code structure, resource loading, and data communication.

Code-Level Optimization

Reducing Code Package Size

The main package size limit for Mini Programs is 2MB, with sub-packages capped at 8MB. Control the size through the following methods:

1. Code Compression: Use tools like terser-webpack-plugin to compress JS code.
2. Image Optimization: Convert images to WebP format and host them on a CDN.
3. On-Demand Importing: Avoid importing entire third-party libraries.

// Bad practice: Full import of lodash
import _ from 'lodash'

// Good practice: On-demand import
import debounce from 'lodash/debounce'

Proper Use of setData

setData is the most common performance bottleneck. Optimization strategies include:

1. Reduce Call Frequency: Merge multiple setData calls.
2. Control Data Volume: Avoid transmitting large objects.
3. Use Path Updates: Precisely update partial data.

// Bad practice: Frequently updating large objects
this.setData({ list: hugeArray })

// Good practice: Path-based updates
this.setData({
  'array[0].text': 'new text',
  'object.subfield': 'new value'
})

Rendering Performance Optimization

List Rendering Optimization

Long lists are a major performance pain point. Recommended solutions:

1. Use Virtual Lists: recycle-view component.
2. Lazy Loading: Load data in batches by listening to scroll events.
3. Node Reuse: Set wx:key.

// Virtual list example
<recycle-view wx:for="{{list}}" wx:key="id">
  <view>{{item.name}}</view>
</recycle-view>

Avoid Unnecessary Rendering

1. Use hidden Instead of wx:if: Keep DOM nodes hidden but intact.
2. Reduce Node Nesting: Simplify WXML structure.
3. Use CSS Animations Over JS Animations.

<!-- Prefer hidden -->
<view hidden="{{!show}}">Content</view>

<!-- Use wx:if only for complex conditions -->
<view wx:if="{{type === 1}}">Type 1</view>

Network Request Optimization

Preload Critical Data

Preload data before the page's onLoad:

// Pre-request in app.js
App({
  globalData: {
    userInfo: null
  },
  onLaunch() {
    this.fetchUserInfo()
  },
  fetchUserInfo() {
    wx.request({
      url: '/api/user',
      success: res => this.globalData.userInfo = res.data
    })
  }
})

Proper Use of Caching

1. API Caching: Store non-real-time data with wx.setStorageSync.
2. Image Caching: Pre-download images using wx.downloadFile.
3. Local Data: Monitor cache size with wx.getStorageInfoSync.

// API caching example
function getData() {
  const cache = wx.getStorageSync('dataCache')
  if (cache && Date.now() - cache.time < 3600000) {
    return Promise.resolve(cache.data)
  }
  return wx.request({
    url: '/api/data',
    success: res => {
      wx.setStorageSync('dataCache', {
        data: res.data,
        time: Date.now()
      })
    }
  })
}

Memory Management Strategies

Timely Resource Cleanup

1. Clear Timers: Remove timers in onUnload.
2. Release Global Events: Unregister listeners with wx.off.
3. Destroy WebGL Contexts: Manually recycle canvas components.

Page({
  onLoad() {
    this.timer = setInterval(() => {}, 1000)
    wx.onAccelerometerChange(this.handleAccelerometer)
  },
  onUnload() {
    clearInterval(this.timer)
    wx.offAccelerometerChange(this.handleAccelerometer)
  }
})

Optimize Image Resources

1. On-Demand Loading: Listen to page visibility.
2. Lazy Loading: Use the intersection-observer API.
3. Resolution Adaptation: Select appropriate sizes based on the device.

// Image lazy loading example
const observer = wx.createIntersectionObserver()
observer.relativeToViewport().observe('.lazy-img', res => {
  if (res.intersectionRatio > 0) {
    this.setData({ imgSrc: 'real-path.jpg' })
    observer.disconnect()
  }
})

Subpackage Loading Strategy

Rational Subpackage Planning

1. Minimize Main Package: Only include essential startup resources.
2. Feature-Based Subpackages: Separate independent modules into subpackages.
3. Preload Subpackages: Configure preloadRule.

// app.json configuration example
{
  "preloadRule": {
    "pages/index": {
      "network": "wifi",
      "packages": ["subpackage1"]
    }
  },
  "subpackages": [
    {
      "root": "subpackage1",
      "pages": ["detail"]
    }
  ]
}

Independent Subpackage Optimization

Independent subpackages can run without the main package:

{
  "subpackages": [
    {
      "root": "independent",
      "pages": ["login"],
      "independent": true
    }
  ]
}

Data Communication Optimization

Use Workers for Complex Calculations

Offload heavy computations to Worker threads:

// Main thread
const worker = wx.createWorker('workers/index.js')
worker.postMessage({ type: 'calculate', data: largeArray })

// worker.js
worker.onMessage(res => {
  if (res.type === 'calculate') {
    const result = heavyCompute(res.data)
    worker.postMessage(result)
  }
})

Optimize Global Data Transfer

Avoid frequent reads/writes of global data:

// Before optimization: Frequent reads
Page({
  onShow() {
    this.setData({ user: getApp().globalData.user })
  }
})

// After optimization: Event-based updates
App({
  watchUser(callback) {
    this.userCallback = callback
  },
  updateUser(user) {
    this.globalData.user = user
    this.userCallback && this.userCallback(user)
  }
})

Startup Speed Optimization

Accelerate First-Paint Rendering

1. Skeleton Screens: Display page framework early.
2. Pre-Rendering: Configure key pages with prerender.
3. Code Injection Optimization: Reduce synchronous operations during startup.

// app.json pre-rendering configuration
{
  "window": {
    "prerender": ["pages/index"]
  }
}

Reduce Synchronous API Calls

Replace Sync-suffixed APIs with asynchronous alternatives:

// Before optimization: Synchronous blocking
try {
  const value = wx.getStorageSync('key')
} catch (e) {}

// After optimization: Asynchronous non-blocking
wx.getStorage({
  key: 'key',
  success: res => {},
  fail: err => {}
})

Continuous Performance Monitoring

Use Performance Panels

1. Debugger Performance Panel: Analyze runtime performance.
2. Memory Snapshots: Detect memory leaks.
3. Custom Metric Reporting: Monitor key performance points.

// Custom performance reporting
const start = Date.now()
wx.request({
  url: '/api/data',
  success: () => {
    const cost = Date.now() - start
    wx.reportAnalytics('api_perf', { api: 'data', cost })
  }
})

Exception Monitoring

Capture and report runtime errors:

// Error listening
wx.onError(error => {
  wx.request({
    url: '/log/error',
    data: { stack: error.stack }
  })
})

// Promise exceptions
process.on('unhandledRejection', error => {
  console.error('unhandledRejection', error)
})