Canvaskit files are reloaded after every run

dart-lang / dart-pad

An online Dart editor with support for console, web, and Flutter apps

https://dartpad.dev

BSD 3-Clause "New" or "Revised" License

1.71k stars 554 forks source link

Canvaskit files are reloaded after every run #1860

Closed johnpryan closed 3 years ago

johnpryan commented 3 years ago

Each time the user re-compiles their code, the app makes unnecessary requests to fetch canvaskit.js and canvaskit.wasm:

Latest master also reloads the fonts and icons:

This might be because we are replacing the HTML (https://github.com/dart-lang/dart-pad/pull/1838)

srawlins commented 3 years ago

Hi @johnpryan can you expand on this? I'm not seeing canvaskit anywhere in our codebase:

dart-pad$ git grep -i canvaskit
dart-pad$

srawlins commented 3 years ago

Oops you assigned to yourself, likely nevermind!

johnpryan commented 3 years ago

Flutter web apps request CanvasKit at startup. @hterkelsen is there a way to disable this so we can load these files once?

@srawlins when we reload the iframe, does that trigger another request to fetch the Firebase JavaScript files?

harryterkelsen commented 3 years ago

Yes, we can detect if there is an already-initialized CanvasKit object and use that rather than loading CanvasKit again. Can you tell me a little more about how you use Flutter web in DartPad? If I set e.g. window._flutterCanvasKit = ... will that value still be there in the next run?

johnpryan commented 3 years ago

We usually keep the same <iframe> element (https://github.com/dart-lang/dart-pad/issues/1817) and send it messages with the new javascript, html, and css from the parent document. Then we have a script, frame.js, running in the iframe that listens to those messages and updates the script tag containing the app's compiled javascript.

When the new script runs, a new <script> tag for canvaskit.js is added to the page, so we end up getting duplicates. JavaScript variables are kept around across runs, since it's the same iframe.