qwikui.com and preview over-fetches and over-executes some js bundles

maiieul commented 6 months ago

TLDR

This is a complex network/bundling issue that looks scary because more kb are being transferred and more resources are being downloaded (as showcased at the bottom of the dev tools), but it seems to be constrained to qwikui.com and isn't a real problem (yet) for the end-user (a.k.a the developer) since it doesn't noticeably slow down page loads.

I suggest not looking into it further as our time is probably best spent elsewhere. We might eventually end up fixing this in future updates or bug fixes.

Description

An image is worth a thousand words:

As you can see, on preview (and this happens in prod too), qwik is downloading and executing (see the ServiceWorkerjs chunks (such as accordion-trigger-2CzFt9Ho.js, accordion-context-id--dprVjBd.js, collapsible-context-id-n_KRb9sO.js, combobox-context-id-sPdc1JgF.js, scroll-area-qwikified-VYs7Nxwj.js, key-code.type-Yo321nVC.js, etc.), that are not even present on the page. The good news is, all of those chunks are served from the service-worker, and they don't seem to end up into terrible waterfalls (it seems to do some kind of "multi-threading", reducing the waterfall to 2 cascades).

I spent about a full week on this issue. It is not easy to understand what's causing it. The farthest I could get with a reproduction is this: https://github.com/QwikDev/qwik/issues/6150 which seems to be a service-worker.js bug. On qwikui.com the bug seems to go even further with chunks being served from the service worker. The difference in my reproduction is that the service-worker only pre-populates the cache and doesn't serve the js chunks, whereas on qwikui.com, it serves the chunks to the main thread. The following image could explain why:

If we look at the actual bundled file being served, we can see for example that entry_make_it_yours-H_X7utmV.js has a few imports that it shouldn't have.

Potential causes (from least likely to most likely)

"the bug comes from using external qwik libraries (such as qwik-themes)" -> it doesn't appear to be the case, since the bug is still there even when copying the qwik-themes code directly into the website app.
"the bug comes from a misconfigured vite.config" -> it doesn't appear to be the case, since using preserveModules on every package or changing the website vite.config to match usual templates doesn't remove the bug.
"the bug comes from useVisibleTask$" -> Not really. Even though removing visibleTasks seems to prevent the service-worker from serving the files on first page load, the wrong bundling showcased in the second image is still present.
"the bug comes from nx" -> Hard to verify. But theoretically shouldn't.
"The bug comes from shiki" -> Unlikely, but we've had a lot of troubles from shiki.
"the bug comes from using the cloudflare adapter" -> Not sure about that, but maybe using the regular SSG could fix the issue.
"The bug comes from import.meta.glob" -> Seems like the most likely cause of the issue right now.

maiieul commented 6 months ago

Either the solution from https://github.com/QwikDev/qwik/issues/5478:

    build: {
      // Disables the preload.
      modulePreload: false,
    },

or the this from the starter code:

    ssr:
      command === 'build' && mode === 'production'
        ? {
            // All dev dependencies should be bundled in the server build
            noExternal: Object.keys(devDependencies),
            // Anything marked as a dependency will not be bundled
            // These should only be production binary deps (including deps of deps), CLI deps, and their module graph
            // If a dep-of-dep needs to be external, add it here
            // For example, if something uses `bcrypt` but you don't have it as a dep, you can write
            // external: [...Object.keys(dependencies), 'bcrypt']
            external: Object.keys(dependencies),
          }
        : undefined,

don't seem to resolve the issue.

So again, it could be a bug caused by nx, shiki 🤷‍♂️, the cloudflare adapter with SSG, or import.meta.glob... Still this seems to be an issue that only happens on qwik-ui so no need to prioritize it since even though it looks scary, it doesn't seem to affect much first-page load speed right now.

maiieul commented 2 months ago

Closing as this seems to have been fixed by moving qwik-themes code themeSig.value initial assignment from a useVisibleTask$ to onClick$ when clicking on "copy code" button of "Make it Yours" feat.

qwikifiers / qwik-ui