Optimizing Image Loading in Flutter for Xianyu: Native Mode, CDN, and External Texture

When Xianyu first adopted Flutter, image loading and memory consumption became critical performance concerns. The article outlines a series of optimizations applied since the first Flutter release.

Native Mode : Uses Android/iOS native ImageCache to control both the number of cached images (maximumSize) and cache size (maximumSizeBytes). Low‑end devices receive smaller cache limits via a custom Flutter plugin that queries device specs.

Disk Cache : Extends the native image framework with a disk cache exposed through a bridge, allowing Flutter to fall back to disk when memory cache misses, reducing network requests.

CDN Optimization : Images are resized to the display size, compressed (prefer WebP), and served in the optimal format. A CDN size‑matching algorithm automatically selects the appropriate image dimensions.

Other Flutter‑specific tweaks : Pre‑loading with precacheImage, custom placeholder handling, element reuse by comparing widget updates, and ListView cacheExtent tuning.

Multi‑Page Memory Optimization : Detects when a page is not at the top of the stack and recycles its image textures, preventing linear memory growth across stacked pages.

External Texture Bridge : Implements a shared‑context texture bridge so Flutter can display images decoded by the native engine without copying data. This also enables texture reuse across pages and reduces bridge call overhead.

Overall Architecture : Shows a layered design where image resources are managed per page, LRU‑based eviction is applied, and texture reference counting ensures efficient GPU memory usage.

Performance Impact : Early results show reduced OOM risk, lower abort rates on iOS, decreased package size by ~1 MB, and noticeable memory savings in multi‑page scenarios.

The article concludes with future plans for further engine‑independent solutions and open‑source release.