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
Related
It seems like vscode is trying to present data in the Locals and/or Watch for a large object but after about 10 seconds, it will kill the app and give the message "Exited (sigterm)" in the debug console. I can pinpoint it to one example where I break on a line immediately after this line:
Uint8List inputBytes = Uint8List.fromList(List.filled(100000000, 0));
I can see "Locals" spinning around but nothing happens and then the app terminates. Is there a setting that can prevent this somehow? Maybe it can cap the represented data at a certain length instead of trying to print it all out?
(I believe this is a vscode specific problem because when I repeat these steps in Android Studio, it doesn't have this issue)
Thanks.
This is a bug in the debug adapter. It should know this is a list and fetch a paged view of the elements, but it's currently fetching them all. For me it doesn't crash, but it also doesn't respond within several minutes.
I'm working on a fix that will let VS Code page through the data:
This will ship in an upcoming Dart/Flutter SDK release.
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.
I need to develop a simple CRUD console app to update a list of Trello cards from a CSV file. I'll run the app in TaskScheduler every night. I've installed #gregsdennis Manatee.Trello packages (impressive code!) but cannot find a single (complete example) of anything like this anywhere. All I've managed to do is auth in with app key and tokedn.
Is there a resource out there that shows simple (full) examples of how to get started? #gregsdennis—the C# libraries are extensive and obviously well thought out—I just need a jump start to get me going. Thanks to all in advance!
Here's the documentation site: https://gregsdennis.github.io/Manatee.Trello/usage/getting-started.html
Summary: My simple website now successfully communicates with Google Spreadsheets, but the inconvenience of adding this Google Spreadsheets API is that deployments of my website (via deployhq.com) now take 50 minutes when they used to take 30 seconds!
Details:
I created a simple webpage using PHP that accepts parameters and then appends a new row of data to a Google Spreadsheet. Getting it working felt like a miracle because Google's documentation was so sparse and often outdated.
Following the example there and on Google's Github page, my composer.json file is:
{
"require": {
"google/apiclient": "^2.0"
}
}
Can I somehow avoid requiring all of those Google dependencies for all of their PHP APIs?
I'd love not to download all of the irrelevant Google API code that has nothing to do with Google Spreadsheets.
I think the massive amount of files is what is causing my deployments to take 50 minutes instead of 30 seconds.
My super basic webpage pretty much just uses the Google_Service_Sheets class and related classes. I want anything extraneous.
If you download a release of the client library it will include the core library and all of its dependencies, without the auto-generated classes. Then you can then download the Sheets API generated classes separately and add them to your project. Using composer is the preferred method, as it makes it easy to get updates later.
P.S. - There are ~4200 generated files downloaded with the library. That's not trivial, but any process that takes 50 minutes to copy those over likely has room for improvement.
I am still a beginner in GWT . Firstly I write a sample project and run it . And open with browser giving url by Development Mode of my Eclipse IDE. At this time , I noticed that my browser was stopped just a few seconds and I can't do anythings on my browser . If I have some other pages are loading to open , they also stop loading . I think in this time browsers will download JavaScript files these need to show my page. That is worse thing for me .
By using RPC , I retrieve many datas from my database and try to render to my view page. That may also happen stop for a moment to my browser. So , I had add a Gif image in my web-page and press some button to retrieve data and try to render my view page. Supprisingly , this Gif image also stop animation. Why has this situation happend with GWT project ?
I am testing it in localhost. Can I avoid it ? Any suggestions ? Thanks...
Development mode (localhost) is very different from the production mode. It is many times slower, and it requires a lot of memory. This is why your browser freezes. You can:
Try a different browser. You may have a better performance on your system.
Add memory to your computer.
Optimize your code. There are many ways to do it. As a first step you need to understand what causes a problem: processing data or rendering of a page.
Finally, deploy your code to the production environment and check if you experience the same problems.