图片优化

Image packages[/lib_common/assets/images/home_out.png]() has a display size of 58×58 but a decode size of 232×232, which uses an additional 262KB. Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 58, a cacheHeight parameter of 58, or using a ResizeImage.

优化前代码

Image(
      image: AssetManager.assetImage("home_in.png"),
      width: 58,
      height: 58,,
  ),

问题点：image控件大小为58x58,image图片实际大小为232x232,此情况下会导致内存额外占用262KB.

优化方案

根据image控件大小，decode控件所需大小的尺寸图片

方案一

使用ResizeImage加载

 Image(
        image: ResizeImage(
          AssetManager.assetImage("home_in.png"),
          width: 58,
          height: 58,
        ),
    ),

方案二

使用Image.asset加载，同时设置cacheHeight，cacheWidth;

Image.asset(
    "assets/images/home_in.png",
    package: "lib_common",
    cacheHeight: 58,
    cacheWidth: 58,
  ),

如何检测项目中图片是否有上述问题

VSCode 命令打开Widget Inspector Page

在Widget Inspector Page有一个HighLight OverSized Images功能，选中后可以check项目内图片加载问题

查看日志信息，并定位相关的组件