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.
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!
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.
Related
I'm currently developing a flutter web application.
I notice that the application takes a lot of time to load (an average of 20 seconds).
The fetch of the 'FontManifest.json' and the fonts 'MaterialIcons-Regular.otf' and 'CupertinoIcons.tff' takes an average of 10 seconds.
I'm not using any of these fonts, as I installed google fonts. It's just wasting time and data.
My question is: how can I get rid of these two fonts in flutter web or how can I reduce the time of waiting tffb + content downloading?
I tried to edit the 'FontManifest.json' and remove the '.otf' and '.tff' but as the files are auto generated, flutter rewrite them during each build.
I don't want to set use-material-design to false because i need some other features.
I already tried to edit the 'fonts' field of the 'pubspec.yaml' file, it doesn't work.
I have already read a few posts, but the questions mostly concerns display problems.
Thanks in advance for your help!
There is a way instead to possibly optimize the build time of the other packages by using the command
cp -r ./build/app/intermediates/flutter/release/flutter_assets/ ./build/web/assets
and the treeshake function available by flutter
--tree-shake-icons
you can read more here
I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);
I'm interested in using Hot Module Replacement with a newly created React app.
Facebook Incubator's create-react-app uses Webpack 2 which can be configured to support HMR, however in order to do so, one needs to "eject" the create-react-app project.
As the documentation points out, this is a "one way" operation and cannot be reversed.
If I'm to do this, I want to know what I might be giving up. I've been unable to locate any documentation that explains the potential drawbacks of ejecting.
The current configuration allows your project to get updates from create-react-app core team. Once you eject you no longer get this.
It's kind of like pulling in bootstrap css via CDN as opposed to downloading the source code and injecting it directly into your project.
If you want more control over your webpack, there are ways to configure/customize it without ejecting:
https://www.npmjs.com/package/custom-react-scripts
What can cause the start render to be delayed even after the load event has fired?
Look at this webpagetest result
This is most probably a bug. For the moment, the iPhone instance on WebPageTest is quite recent and the author is still improving it:
The iOS support is just becoming stable though it's still under VERY active development so don't be surprised if there are a few rough edges (and a lot more limitations than the android testing).
- Patrick Meenan, 09-09-2015
The android tests are much more reliable.
If you check the page you tested without javascript (F1 > Disable Javascript in Chrome DevTools), you can see that most images are lazy-loaded, which mean they are loaded via a JS script checking if the images are in the viewport. As you can see, without JS the load time line is well after all assets loaded.
Also for other assets, like JS, you can add an async or defer attribute to de-synchronize your scripts loads.
Finally, some scripts can be even deliberately loaded after the load event using an attachment on the window load event to write <script> tags in the body when it's triggered as loadJS do for example.
You should read that by the way to better understand how rendering and events timing work.
GWT is used and the application is deployed on WebLogic using HTTPS.
The performance is poor and with F12 Developer Tools, we could see that blank.html is downloaded multiple times. This is clearly related to GWT but we have not been able to figure out why.
The following is from javascript:
defineSeed(2613, 2614, makeCastMap([Q$BaseModelData, Q$ModelData, Q$Theme, Q$Serializable]), Slate_0);
var SLATE;
function $clinit_GXT(){
$clinit_GXT = nullMethod;
IMAGES = new XImages_generatedBundle_0;
MESSAGES = new XMessages__0;
SSL_SECURE_URL = getModuleBaseURL() + 'blank.html';
}
This is from GWT.java:
/**
* URL to a blank file used by GXT when in secure mode for iframe src to
* prevent the IE insecure content. Default value is 'blank.html'.
*/
public static String SSL_SECURE_URL = GWT.getModuleBaseURL() + "blank.html";
Does anyone know under what circumstances blank.html is called?
Thanks!
This is from GWT.java:
This is actually from GXT.java.
This is used in a few cases when creating an <iframe> element, so that IE won't give errors if your site is hosted from SSL. I can actually only find one case (as of GXT 3.1.1) which uses this, in Layer.java. Only IE pages loaded from https urls will make use of this.
The Layer class uses this as a "shim", a way to prop up some DOM elements above overs, and work around some browser bugs (typically plugin or iframe related). Menus and popup dialogs use this to ensure that they don't appear "underneath" content that they should be "above".
This file is very small - just enough HTML to convince IE than the iframe has correctly loaded, and no more. It never changes, and should load nearly instantly.
As far as performance goes, this should only happen when a Menu or Window/Dialog/Tooltip is shown - these shouldn't be happening on app startup usually, at least not more than a window or two. Additionally, the browser should recognize that it is loading the same element and cache it correctly, and not load it multiple times (though it might be listed several times as hitting the cache). If the server has instructed the browser to never cache the file, that is something you should look at changing.
In short, this is very unlikely to be the cause of any performance issues, at least in GXT itself. If somehow you have the shim enabled on every single widget in your project, this should not be required. If the file is loading slowly, something may be very wrong with your server configuration.
For reference, here is the entire file:
<html></html>