uni-app 性能优化

以下是关于 uni-app 性能优化的详细介绍，并包含案例展示：

一、uni-app 性能优化概述

在 uni-app 开发中，性能优化是确保应用流畅运行、提升用户体验的关键。以下是一些常见的性能优化方向和策略：

1. 代码优化

   • 避免不必要的计算和重复计算，将复杂的计算逻辑放在合适的时机执行。
   • 优化数据结构，选择合适的数据存储方式，如使用对象或数组时根据具体场景进行选择。

2. 组件优化

   • 合理使用组件的生命周期，避免在不必要的生命周期钩子中执行耗时操作。
   • 对于频繁更新的组件，使用 shouldComponentUpdate 或类似的方法进行性能优化，避免不必要的重新渲染。

3. 图片优化

   • 压缩图片大小，减少图片的加载时间。
   • 根据不同屏幕尺寸和分辨率提供合适尺寸的图片，避免加载过大的图片。

4. 网络请求优化

   • 合并和减少网络请求的次数，尽量一次获取所需的多个数据。
   • 对网络请求进行缓存，避免重复请求相同的数据。

5. 页面加载优化

   • 懒加载页面中的非关键内容，如图片、视频等。
   • 合理使用预加载和预取技术，提前加载可能用到的页面或资源。

二、案例展示

假设我们有一个商品列表页面，包含商品图片、名称、价格等信息。

1. 代码优化

// 优化前
export default {
  data() {
    return {
      goodsList: [],
      totalCount: 0
    };
  },
  methods: {
    fetchGoods() {
      // 模拟获取商品数据的异步操作
      setTimeout(() => {
        this.goodsList = [
          { id: 1, name: '商品 1', price: 100 },
          { id: 2, name: '商品 2', price: 200 }
        ];
        this.totalCount = this.goodsList.length;
      }, 2000);
    }
  },
  created() {
    this.fetchGoods();
  }
};

// 优化后
export default {
  data() {
    return {
      goodsList: [],
      totalCount: 0
    };
  },
  methods: {
    async fetchGoods() {
      const response = await fetch('https://example.com/api/goods'); 
      const data = await response.json();
      this.goodsList = data;
      this.totalCount = this.goodsList.length;
    }
  },
  async created() {
    await this.fetchGoods();
  }
};

在上述优化前的代码中，使用 setTimeout 模拟异步操作，不够优雅且不利于代码维护。优化后，使用 async/await 来处理异步请求，使代码更清晰易读，并且能够更好地处理错误。

1. 图片优化

<!-- 优化前 -->
<image src="https://example.com/big-image.jpg" />

<!-- 优化后 -->
<image :src="getImageSrc()" mode="widthFix" />

<script>
export default {
  methods: {
    getImageSrc() {
      // 根据屏幕尺寸和分辨率返回合适尺寸的图片 URL
      const screenWidth = uni.getSystemInfoSync().screenWidth;
      if (screenWidth < 750) {
        return 'https://example.com/small-image.jpg';
      } else {
        return 'https://example.com/big-image.jpg';
      }
    }
  }
};
</script>

通过根据屏幕尺寸动态获取合适大小的图片 URL，减少了图片加载的时间和流量消耗。

1. 网络请求优化

// 优化前
export default {
  methods: {
    fetchGoods() {
      fetch('https://example.com/api/goods')
      .then(response => response.json())
      .then(data => {
          this.goodsList = data;
        })
      .catch(error => {
          console.error(error);
        });
    },
    fetchDetails(id) {
      fetch(`https://example.com/api/goods/${id}`)
      .then(response => response.json())
      .then(data => {
          this.goodsDetails = data;
        })
      .catch(error => {
          console.error(error);
        });
    }
  },
  created() {
    this.fetchGoods();
    this.fetchDetails(1);
  }
};

// 优化后
export default {
  methods: {
    async fetchData() {
      const [goodsResponse, detailsResponse] = await Promise.all([
        fetch('https://example.com/api/goods'),
        fetch('https://example.com/api/goods/1')
      ]);

      const goodsData = await goodsResponse.json();
      const detailsData = await detailsResponse.json();

      this.goodsList = goodsData;
      this.goodsDetails = detailsData;
    }
  },
  async created() {
    await this.fetchData();
  }
};

优化前分别发送了两个独立的网络请求，优化后使用 Promise.all 同时发送两个请求，提高了请求效率。

通过以上的优化措施，可以显著提升 uni-app 应用的性能，为用户提供更流畅的使用体验。

希望这个案例展示对您有所帮助，您在实际开发中可以根据具体项目的特点进行针对性的性能优化。