网络缓存优化

网络请求是应用程序与服务器之间进行数据交互的过程，每次请求都需要时间和资源。通过缓存优化，可以避免重复的网络请求，减少了数据的传输量和服务器的压力，从而提高了应用程序的性能。缓存的数据被存储在本地设备中，当再次需要时，可以直接从本地读取，不需要再通过网络请求获取。这样可以减少网络延迟，并显著提高应用程序的响应速度，用户可以更快地获取到所需的数据。尤其是图片，在Flutter的优化中，是极为必要的，因为可以大大减少当图片较多时，因为请求的次数过多，导致网络请求时间过长，阻塞，影响用户体验。
缓存对于服务器压力的释放，我们不在提及。我们将介绍一些关于Flutter网络缓存优化的技巧。这些优化逻辑，将基于一些常用的依赖，如Dio或者CachedNetworkImage等。

HTTP缓存策略的兼容

缓存的基础，就是对HTTP标准请求的支持，接口请求类中确保类似Etag等支持，这样当接口设置了缓存策略，请求类就可以直接使用缓存。如果你使用Dio 只需要引入以下的插件便可以完成兼容

dio_cache_interceptor: ^3.5.0

这样一来，当发起接口请求一个较大的JSON配置，在缓存期内，将直接从本地取得缓存，避免了较长时间的请求。有关于HTTP缓存策略，参考HTTP缓存策略。

图片缓存

使用CachedNetworkImage，不仅可以轻松的显示网络图片，还能缓存图片，避免重复请求。 当然最核心的是，可以在缓存时，设置图片的质量，这样缓存的图片，就比原图要小很多，从而大大节省运行时较大图片对内存的占用。

cached_network_image: ^3.3.1

在pubspec.yaml中引入依赖。并使用CachedNetworkImage，封装一个无状态组件，用于复用，并统一管理图片缓存配置。

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

class MyImage extends StatelessWidget {
  const MyImage({super.key, required this.imageUrl, this.memCacheWidth, this.memCacheHeight});

  /// 图片的地址
  final String imageUrl;

  /// 缓存宽度
  /// 注意，如果设置memCacheWidth 一般不要设置memCacheHeight，防止缓存图片时，比例与原图不一致
  final int? memCacheWidth;

  /// 缓存的高度
  final int? memCacheHeight;

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
        imageUrl: imageUrl,
        memCacheWidth: memCacheWidth,
        memCacheHeight: memCacheHeight,
        /// 设置最大缓存图片的宽度，防止缓存图片过大
        maxWidthDiskCache: 500);
  }
}

上面的图片组件，可以设置缓存的宽高，从而减少缓存图片的大小，从而节省内存并且防止后端返回较大图片时，造成内存瞬时飙升，特别是在列表中。
你还可以使用octo_image，或者其他组件，但确保缓存图片的同时，能降低图片质量从而减少应用对内存的影响，又不影响体验。

octo_image: ^2.0.0

请求类的统一封装

请求类是复用最多的模块，建议使用单例进行封装。只有在网络异常时，才尝试重载Dio instance，避免过多的对象创建。
过去的优化方案中，我们提到过查看示例