Quasar resolver generates huge bundle size

[philippedasilva-orizone]

Hi,

Just trying out Quasar with unplugin-vue-components and I noticed that when building the application (using Vite, Vue3, Typescript and Quasar Vite Plugin), I get a bundle size that gets over 500 KiB. (it imports quasar.esm.prod.js)

If I don't use unplugin-vue-components and therefore manually import Quasar components, the bundle is way lighter (~120 KiB)

Any idea why and how this could be solved? Thanks

[philippedasilva-orizone]

Note that I'm more than willing to help solve the issue but I would require some tips where to look at ;)

[stefanvanherwijnen]

Can you post your vite configuration?

[philippedasilva-orizone]

Yes, sure, thanks for asking:

import * as path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

import Pages from 'vite-plugin-pages'

import Icons from 'unplugin-icons/vite'

import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { QuasarResolver } from 'unplugin-vue-components/resolvers'

import VueI18n from '@intlify/vite-plugin-vue-i18n'

import WindiCSS from 'vite-plugin-windicss'

import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

export default defineConfig({
  resolve: { alias: { '~/': `${path.resolve(__dirname, 'src')}/` } },
  plugins: [
    Vue({ template: { transformAssetUrls } }),
    Pages(),
    Icons(),
    AutoImport({ imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/core', '@vueuse/head', 'pinia', 'quasar'], dts: 'src/auto-imports.d.ts' }),
    Components({ extensions: ['vue'], include: [/\.vue$/, /\.vue\?vue/], resolvers: [QuasarResolver()], dts: 'src/components.d.ts' }),
    VueI18n({ runtimeOnly: true, compositionOnly: true, include: path.resolve(__dirname, 'locales/**') }),
    WindiCSS(),
    quasar({ runMode: 'web-client' }),
  ],
  optimizeDeps: {
    include: [
      'vue', 'vue-router', '@vueuse/core', '@vueuse/head',
      'gun', 'gun/gun', 'gun/sea', 'gun/sea.js', 'gun/lib/then', 'gun/lib/webrtc', 'gun/lib/radix', 'gun/lib/radisk', 'gun/lib/store', 'gun/lib/rindexed',
    ],
  },
  build: {
    chunkSizeWarningLimit: 1024,
  },
})

[stefanvanherwijnen]

As far as I know quasar vite plugin already auto imports components so there is no need for unplugin-vue-components in your case.

[philippedasilva-orizone]

I don't know about Quasar vite plugin used inside the Quasar CLI or app-vite I believe it is called but when integrating it onto an existing vite project, it doesn't seem to do it as I have a bunch of unresolved issues popping when I remove the QuasarResolver method from the Resolvers array in the unplugin-vue-components plugin call... :p

And that may be useful to understand:

import { Notify, Quasar } from 'quasar'
import quasarIconSet from 'quasar/icon-set/mdi-v6'
import '@quasar/extras/mdi-v6/mdi-v6.css'
import 'quasar/dist/quasar.css'

/* some other vue instantiation stuff... */

app.use(Quasar, { plugins: { Notify }, config: { notify: {} }, iconSet: quasarIconSet })

[stefanvanherwijnen]

Start by following the documentation of Quasar CLI and proceed from there. Many features are already built into Quasar Vite so you may not need most plugins.

[Tofandel]

I think the issue is coming from AutoImport({ imports: [/*...*/'quasar'], dts: 'src/auto-imports.d.ts' }) which imports the whole bundle