flutter web alternates/reduce size of canvaskit.wasm

Question

My flutter web initial page load is slow(10-15 secs), Found that large amount of time is spent in downloading "https://unpkg.com/[email protected]/bin/canvaskit.wasm" which is around 2.5 MB as per browser logs.

Is there a way to reduce this time/alternate file path/ minification which can be done?

(package is built using flutter build web)

Goby

I started an experimental polyfill of canvaskit that uses the browser APIs: github.com/wcandillon/canvaskit-lite. So far it looks promising. We test it with chrome and check that it produces the same images than the one made by CanvasKit. – Chery

Answer 1

Changed web renderer to html renderer

flutter build web --web-renderer html

which resulted in significant reduction in initial load time

Goby

Answer 2

For the moment there is no solution for this, anyways the Flutter team is working on that and there should be a solution as soon as possible. You can check the status of this in this link: Flutter github issue

Cautery

Answer 3

There is a possibility to integrate the canvaskit at build process and host it with your web app for offline support.

Therefore you need to define the url like:

flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/

This may could also reduce loading time. (direct network connection, no dns lookup...)

Wobble