燃烧我的卡路里——Flutter瘦内存、瘦包之图片渲染组件

背景

在电商类APP里，图片到现在为止仍然是最重要的信息承载媒介，不得不说逛淘宝的过程，其实就是一个看图片的过程。而商品详情页中的图片，通常是页面中内存占用最多的内容，占用了整个页面内存的超过 50%，因此是通常容易引起app闪退的场景之一。

闲鱼在Flutter化的过程中，选择了商品详情页作为第一个落地的场景。通过多版本的迭代完善，基于Flutter的详情页已经在闲鱼稳定运行。然而正因为详情页的图片量大，导致Flutter里图片相关的问题一直挥之不去。

1：内存问题 --- 连续push flutter界面内存累积

2：安装包问题 --- 过渡时期两份重复资源文件

3：寻址缓存问题 --- 原有的寻址缓存策略无法复用

4：图片复用问题 --- Native和Flutter重复下载相同图片

解决方案——FXTexImage_V1

为了解决这些问题，我们尝试着寻找一种新的思路，一种能够将flutter与native串联起来的思路。而之前做视频播放器的方案给了我们启发。

熟悉Flutter的同学应该都知道，Flutter的视频组件是基于一个Flutter提供的一个叫“外接纹理”的技术实现的，关于flutter外接纹理，本人另外有一篇文章有更详细的论述，这里不再赘述《https://mp.weixin.qq.com/s/KkCsBvnRayvpXdI35J3fnw》

我们将每一张图片假想成一个：静态的视频。图片的内容由一个externaltexture来负责显示，而这个externaltexture则由native端提供具体的渲染数据。

通过这种方案，我们便可以通过externa