Caching in Flutter for Web

How to deliver to your clients the latest and greatest

Constantin Stan
Flutter Community

--

Photo by Kai Pilger on Unsplash

The bright side of caching

Caching is great when it comes to fetching large resources frequently: libraries, images or other assets. The mechanism is quite simple to explain and understand: the resources have a unique URL and based on that the browser saves on the user’s device the downloaded resource for future reuse.

Browsers can also receive instructions, from servers, for how long to cache content. In the case of large libraries (like main.dart.js, the current output of Flutter for the web platform), we’d like to have that cached forever, if nothing changes.

For example, my main.dart.js is currently ~2Mb in size. Fetching something that large over the network is both slow (requires many client-server roundtrips which takes time and the initial loading time is something that makes or breaks an app — web or mobile) and expensive (first, consider data costs incurred to the user, then to yourself serving that content).

So, having this mechanism in place saves us time and money. That's great, isn't it?

There is a side, an ugly side

--

--