lazy-load

When you visit the page in a browser, and log your network traffic, every time the page loads (or you press the Mehr Pressemitteilungen anzeigen button) an XHR (XmlHttpRequest) request is made to some kind of API(?) - the response of which is JSON, which also contains HTML. It's this HTML that contains the list-item elements you're looking for. You don't need selenium for this:

The warning basically says that if the firebase package exports any svelte components (which it doesn't), the svelte compiler won't pick it up and won't be able to optimize it. I have seen the warning too and I don't think there is anything to worry about.

The issue was related to a calculation error in Safari's WebKit API. The issue was reported on the WebKit Bugzilla (report), and was patched in WebKit Changeset 276521. Said changeset was merged and released with Safari Technical Preview 125.

So turns out i was using the keycloakd adapter in version 11 instead of latest version 13 which caused the error.

First thing is to confirm this is really not prefetching...

1. Build your app and look at the generated index.html - if you see tags with rel="prefetch" and your lazy loading chunks, this is prefetching Vue CLI does automatically. On the link above you can read about how to disable it or fine tune it

2. Check the network tab in Dev Tools and select one of your lazy loaded chunks - look at the Request headers and look for Purpose: prefetch (Firefox uses X-Moz prefetch). If you find this, it means that browser requested the chunk because of prefetch link...

Now you can confirm your feeling that these chunks slow down your app 1st render. Best way is again using Dev Tools - this time the Performance (I'm more used to Chrome ...seems better than Firefox)

Chrome: Just open Dev Tools, switch to Performance tab and use small "reload" icon with "Start profiling and reload page" tooltip. You can stop the profiling after page is loaded.

Here is the screenshot of one of mine apps. This is Vue CLI app with just one lazy route ("admin"). It may seem like DOMContentLoaded event (blue DCL) and First Paint (green FP) strangely correlate with admin98... chunk finished loading so it may seem my app's 1st paint is blocked by my lazy loaded "admin" chunk

But if you look more carefully you will see there is a task running ("Parse HTML" + "Evaluate Script" - selected in the screenshot) - it starts when the last "non prefetch" script is loaded ("chunk-vendors" in this case) and accidentally finishes at the same time "admin" chunk loading is finished. So the browser is parsing other non-lazy loaded JS of my app and at the same time downloading prefetch scripts. It is clear that prefetching lazy loaded chunk do not block or delay my app 1st paint even it may seem so...

This is just an example

You have to do following:

Fun fact: tags actually block your application load. If you have 100 images on your page, the browser will download all 100 of them before it renders your page.

That is completely false. If that were true no one would ever see the text of their web page with empty boxes where the images would be, followed by the images loading in those boxes. The entire point of DOMContentLoaded vs. load events is that the HTML elements can be completely parsed before the external page resources have finished downloading and rendering. Additionally, no one would ever need a load event on an img because, if that article were true, all images would be loaded by the time you saw the page.

=============================================================

While the JavaScript runtime is single threaded, the browser client is not. "Resource files" (any file that is referenced by the .html page being parsed) are downloaded simultaneous to the page being parsed. There may be a maximum amount of resources that the client will download at the same time (years ago in IE the limit was 10 by default, but I think that's been upped since then).

Oftentimes when you load up a web page, you'll see all the text of the page first (because text loads really fast) and the images load after that. It's simply because images take longer to download than text, not that the images wait to begin downloading.

This can be verified by looking at the Network tab of your browser's development tools while a page loads. You'll see a variety of resources being downloaded simultaneously with the page.

Finally I was able to fix it.Looks like route on the tabs were not setup correctly. Here's what I changed:

1. Moved tabProps to compute() to update route on the fly.
2. Fired an event from child component to update the route which gets caught by the parent that updates the route.
3. I did not use this.$route to update the tab route dynamically since I wanted to retain the state of the second tab if a child node is selected on the tree but the user switches to the first tab which contains data for the parent. (I know its confusing). So its like a file explorer where first tab shows details of the folder and second tab shows details of the selected child in that folder.

Tab states are now maintained.

Here's the relevant code (not the most efficient but it works). Hopefully, it helps someone facing similar issue.

route.js

I actually also speak french but I'll reply in english for everybody.

Your question was quite interesting because I also wanted to try out some lazy loading so I had a play on Codepen with your example (using your booking id).

I used the appear.js library because I didn't really want to spend time trying some other APIs (perhaps lighter so to take in consideration).

The main JS part I wrote is like this: