Performance optimization strategies

Performance optimization is an essential aspect of uni-app development. Proper optimization strategies can significantly improve application efficiency, reduce resource consumption, and enhance user experience. Below are specific optimization approaches across multiple dimensions.

Reducing Data Binding and Rendering Pressure

Frequent data binding can lead to unnecessary rendering overhead. In complex list scenarios, always use :key with v-for to improve diff efficiency:

// Recommended approach
<template v-for="item in largeList" :key="item.id">
  <view>{{ item.content }}</view>
</template>

For static content, use the one-time binding directive v-once:

<view v-once>Fixed title text</view>

Avoid deep-watching entire objects:

// Not recommended
watch: {
  deepObject: {
    handler() { /*...*/ },
    deep: true
  }
}

// Recommended: Watch specific properties
watch: {
  'deepObject.key': function() { /*...*/ }
}

Image Resource Optimization Strategies

Image size directly impacts page load speed. Consider the following approaches:

1. Use tools like TinyPNG to compress images, typically reducing size by over 60%.
2. Dynamically load different image sizes based on device resolution:

computed: {
  imgUrl() {
    return window.devicePixelRatio > 1 
      ? '/images/logo@2x.png'
      : '/images/logo.png'
  }
}

3. Enable lazy loading for non-critical images:

<image lazy-load src="background.jpg"></image>

Componentization and Code Splitting

Properly splitting components effectively controls rendering granularity. For complex pages:

// Dynamically load non-essential components
const HeavyComponent = () => import('@/components/HeavyComponent.vue')

export default {
  components: {
    HeavyComponent
  }
}

Register global components on-demand:

// main.js
Vue.component('CommonButton', () => import('@/components/CommonButton'))

Network Request Optimization

Merging API requests is an effective way to reduce network latency. For example, on a product detail page:

async loadData() {
  // Merge product details and stock status
  const [detail, stock] = await Promise.all([
    api.getDetail(this.id),
    api.getStock(this.id)
  ])
  // ...process data
}

Enable persistent storage to reduce duplicate requests:

import { setStorageSync, getStorageSync } from '@uni/storage'

async fetchConfig() {
  const cacheKey = 'sysConfig'
  let config = getStorageSync(cacheKey)
  if (!config) {
    config = await api.getConfig()
    setStorageSync(cacheKey, config)
  }
  return config
}

Animation Performance Enhancement

Prioritize CSS animations using transform and opacity:

/* Better performance */
.box {
  transition: transform 0.3s ease;
}
.box-active {
  transform: scale(1.1);
}

Avoid using properties like width/height in animations, as they trigger reflows. For complex animations, consider CSS hardware acceleration:

.accelerate {
  will-change: transform;
  transform: translateZ(0);
}

Memory Management Practices

Clean up global event listeners promptly:

export default {
  mounted() {
    this.resizeObserver = uni.onWindowResize(() => {
      // ...handle logic
    })
  },
  beforeDestroy() {
    this.resizeObserver && this.resizeObserver.off()
  }
}

Use virtual scrolling for large data lists:

<scroll-view 
  scroll-y 
  :style="{height: screenHeight + 'px'}"
  @scrolltolower="loadMore">
  <view v-for="item in virtualList" 
        :style="{height: itemHeight + 'px'}">
    {{ item.content }}
  </view>
</scroll-view>

Bundle Size Control

Optimize first-screen loading with subpackage strategies:

// pages.json
{
  "subPackages": [{
    "root": "packageA",
    "pages": [
      "pages/category",
      "pages/detail"
    ]
  }]
}

Analyze and remove unused dependencies:

# Use webpack-bundle-analyzer for analysis
npm run build -- --report

Rendering Performance Monitoring

Enable performance panels during development:

// main.js
Vue.config.performance = process.env.NODE_ENV !== 'production'

Add performance markers to critical paths:

export default {
  methods: {
    loadData() {
      const start = Date.now()
      // ...data loading logic
      console.log(`Data loading time: ${Date.now() - start}ms`)
    }
  }
}

Platform-Specific Optimizations

For WeChat Mini Programs, enable custom component reuse:

// page.json
{
  "componentPlaceholder": {
    "custom-component": "view"
  }
}

For H5, enable route preloading:

// manifest.json
{
  "h5": {
    "preload": {
      "type": "static",
      "include": ["pages/index"]
    }
  }
}