Why is Quasar deliberately not pre-bundled with Vite?

[philfontaine]

I'm using @quasar/app-vite and the DX is not as good as I would hoped it to be, namely:

• Cold starts are slow (Quasar CLI Vite multiple page reloads on cold start (no .q-cache) #12933)
• First render is slow (300 HTTP requests for a single page)
• Navigating between pages is slow when landing on that page for the first time (because of code splitting)

As I'm searching for an answer on why Vite is slow, I came across the fact that node_modules dependencies are normally pre-bundled to fix this exact problem (e.g. they talk about lodash-es making 600 HTTP requests). https://vitejs.dev/guide/dep-pre-bundling.html#the-why

So I start a new project using yarn create vite and manually add quasar. Everything works and is fast, pre-bundling works since my browser only makes about 20 requests (a single one for quasar).

I start a new quasar app vite project with the same components and it's slower since it's making 80 requests on each page refresh.

Then, I realize that I didn't even use the @quasar/vite-plugin in my first project. I add it and then see that it explicitly disables pre-bundling, so it's now as slow as @quasar/app-vite.

Demo projects are here https://github.com/philfontaine/demo-bug-quasar-cli-vite

I've got 2 questions:

1. Since disabling the pre-bundling is a deliberate choice, what won't work if we don't use the @quasar/vite-plugin? The few components I tried seemed to be working, but I suspect some stuff does not work?

2. Would you consider fixing this problem in some other manner? Quasar is a library, and from what I understand libraries should be pre-bundled in Vite, otherwise the DX does not seem better than Webpack.

[philfontaine]

So after experimenting a bit, turns out the problem is tied to the jsTransform and vueTransform done in @quasar/vite-plugin. However, these 2 are essential in production for tree shaking.

So the solution would be:

• DEV: disable those 2 transforms, Qusasar is pre-bundled as a single dependency by vite (no tree-shaking). This makes it faster for dev.
• PROD: enable the 2 transforms (tree-shaking working).

There is also the optimizeDeps.exlude(['quasar']) that needs to be switched off/on depending on dev/prod.

I'll submit a PR later today.

[yusufkandemir]

Thanks for investigating this. As you said the transforms are crucial for tree-shaking, I've experimented with other ways to achieve tree-shaking without them, but all failed. But, using Quasar's "fair-enough" ESM build with Vite's own optimizations on dev and using the transforms on prod to still achieve tree-shaking sounds like a good solution 👏

[philfontaine]

I submitted the PR #14117 but it was closed since it breaks some modes (I believe SSR) in its current state. Waiting to see if Razvan would consider an updated PR for this.