cached_network_image 是 Flutter 中常用的用于加载和缓存网络图片的库，为了进一步提升应用性能、减少资源消耗和优化用户体验，可以从多个方面对其进行优化，以下是详细介绍：

1. 合理配置缓存策略

1.1 调整缓存过期时间

根据图片的更新频率和使用场景，合理设置缓存的过期时间。对于更新不频繁的图片，可以设置较长的过期时间，减少不必要的网络请求；对于经常更新的图片，则设置较短的过期时间。

dart

import 'package:cached_network_image/cached_network_image.dart';

// 创建自定义的 ImageCacheManager 并设置缓存过期时间
final customCacheManager = CacheManager(
  Config(
    'customCacheKey',
    stalePeriod: const Duration(days: 7), // 设置缓存过期时间为 7 天
    maxNrOfCacheObjects: 100, // 最大缓存对象数量
  ),
);

// 在 CachedNetworkImage 中使用自定义的 CacheManager
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  cacheManager: customCacheManager,
);

1.2 控制缓存大小

可以通过设置 maxNrOfCacheObjects 或 maxCacheSize 来限制缓存的大小，避免缓存占用过多的存储空间。

dart

final customCacheManager = CacheManager(
  Config(
    'customCacheKey',
    maxCacheSize: 100 * 1024 * 1024, // 最大缓存大小为 100MB
  ),
);

2. 优化图片加载

2.1 预加载图片

在需要显示图片之前，提前进行预加载，减少用户等待时间。可以在页面初始化或合适的时机调用 CachedNetworkImageProvider 的 resolve 方法进行预加载。

dart

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ImagePreloader {
  static Future<void> preloadImage(String imageUrl) async {
    final imageProvider = CachedNetworkImageProvider(imageUrl);
    await imageProvider.resolve(ImageConfiguration.empty).first;
  }
}

// 在合适的地方调用预加载方法
await ImagePreloader.preloadImage('https://example.com/image.jpg');

2.2 处理加载失败和占位符

为 CachedNetworkImage 设置合适的占位符和错误处理 widget，提升用户体验。

dart

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(), // 加载中显示进度指示器
  errorWidget: (context, url, error) => Icon(Icons.error), // 加载失败显示错误图标
);

2.3 图片压缩和调整大小

在服务器端对图片进行压缩和调整大小，减少图片的文件大小，从而加快图片的加载速度。同时，在 CachedNetworkImage 中可以通过 width 和 height 属性指定图片的显示大小，避免不必要的缩放操作。

dart

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  width: 200,
  height: 200,
);

3. 网络请求优化

3.1 使用缓存头

确保服务器端正确设置了图片的缓存头信息（如 Cache-Control、Expires 等），cached_network_image 会根据这些信息来判断是否需要重新下载图片。

3.2 重试机制

在网络请求失败时，实现重试机制，增加图片加载的成功率。可以通过自定义 http.Client 并添加重试逻辑来实现。

dart

import 'package:http/http.dart' as http;
import 'package:http/retry.dart';

final client = RetryClient(http.Client());

final customCacheManager = CacheManager(
  Config(
    'customCacheKey',
    httpClient: client,
  ),
);

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  cacheManager: customCacheManager,
);

4. 内存管理

4.1 及时清理缓存

在应用的合适时机（如应用退出、缓存空间不足等），手动清理缓存，释放存储空间。

dart

customCacheManager.emptyCache(); // 清空缓存

4.2 避免重复加载

在代码中避免重复创建 CachedNetworkImage 实例加载相同的图片，尽量复用已有的实例。

5. 监控和调试

5.1 日志记录

在开发和测试阶段，开启 cached_network_image 的日志记录功能，方便排查问题。

dart

import 'package:cached_network_image/cached_network_image.dart';

void main() {
  CachedNetworkImage.logLevel = CacheManagerLogLevel.debug; // 开启调试日志
  runApp(const MyApp());
}

5.2 性能监控

使用 Flutter 的性能监控工具（如 DevTools）来监控图片加载的性能，找出性能瓶颈并进行优化。

分享

预加载图片的方式有哪些？

如何使用`ImageProvider`手动预加载图片？

如何处理图片加载失败和占位符？