15

As of now, we can launch a flutter web app as a single file that will load at once hence taking a lot of time and bandwidth to load which is not ideal, is there any way to load only a single page at a time, not the whole web app. By this I mean, load a widget at a time.

Any suggestions will be appreciated.

Christopher Moore
  • 15,626
  • 10
  • 42
  • 52
UTKARSH Sharma
  • 698
  • 1
  • 8
  • 17
  • By single page, I mean a single widget. – UTKARSH Sharma May 12 '20 at 16:06
  • To render only visible widgets with some cache extent, consider wrapping your widgets with `ListView.builder`, or `GridView.builder` with a suitable `cacheExtent`. However, this will not improve your web app's `First Contentful Paint` timings. This will only improve your web page's heaviness if it's a lengthy single page. – Rithvik Nishad Aug 15 '21 at 09:48

2 Answers2

7

after spending a lot of hours trying to solve this situation, I found a solution to speed up the first load of the app. I saw that my main.dart.js was being downloaded and then, after that, the main.dart.js was triggering the download of the canvaskit.wasm file, this means that my app was starting on a cascade mode, avoiding downloading both files in parallel.

So my solution, after many many many attempts is based on adding only 2 lines of code to the index.html file (.../project_folder/web/index.html). Inside the <head>...</head> tag insert this two lines:

<script src="https://unpkg.com/canvaskit-wasm@0.33.0/bin/canvaskit.js"></script>
<link rel="preload" href="https://unpkg.com/canvaskit-wasm@0.33.0/bin/canvaskit.wasm" as="fetch" crossOrigin="anonymous">

I know hardcoding these URLs it's not a good practice, but, you will only need to change them if you update Flutter. I'm using Flutter 2.10.1 that uses CanvasKit 0.30.0, and when you build the web app, the generated main.dart.js has a hardcoded URL inside.

If you are going to add those 2 lines to your index.html file, I recommend you to build the web app, and open the main.dart.js file and search for "canvaskit-wasm", there you will find which is the URL you should use (something like "https://unpkg.com/canvaskit-wasm@0.33.0/bin/").

It's giving me a good improvement for the initial loading time! So, hope it works for you too!

Gazihan Alankus
  • 11,256
  • 7
  • 46
  • 57
ALNAJJAR
  • 292
  • 3
  • 11
  • I got this warn "was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally." with no improvements in loading time , can you pls explain what's wrong ? – Sherif farid Apr 09 '22 at 17:48
  • Am using flutter 3.3.1. I have added these lines. But still it's same like before. What I can do now? – Sunisha Guptan Sep 23 '22 at 07:39
  • @SunishaGuptan Did you change the version of 'canvaskit-wasm' that you actually use? In my case : canvaskit-wasm@0.35.0 – Hyungju Moon Nov 07 '22 at 00:15
  • Do not change the version – ALNAJJAR Nov 13 '22 at 07:50
  • I’m using html-renderer, despite that I’m facing the same issue.. Any help?? – Prudhvik Chirunomula Apr 22 '23 at 13:53
  • This caused a slight performance increase of 7% for me (based on lighthouse debug data). Thanks! My URL was very different and looked something like: `https://www.gstatic.com/flutter-canvaskit/.../` – Paul Jul 03 '23 at 06:00
2

Yes, you can load the Flutter web library, only when it is called using Deferred/Lazily loading. Here I copy/paste from Dart documentation:

Lazily loading a library

Deferred loading (also called lazy loading) allows a web app to load a library on demand, if and when the library is needed. Here are some cases when you might use deferred loading:

To reduce a web app’s initial startup time.
To perform A/B testing—trying out alternative implementations of an algorithm, for example.
To load rarely used functionality, such as optional screens and dialogs.

And here an article related to this topic.

I Made Mudita
  • 480
  • 5
  • 11