Use sideEffects flag in package.json to enable tree shaking in other bundlers

Is your feature request related to a problem? Please describe.

Right now quasar relies on its CLI to perform tree shaking on unused components (from a custom webpack hook?). Other bundlers (vite, esbuild, snowpack etc.) have to load everything from the compiled bundle dist/quasar.esm.prod.js which results in larger bundles than necessary.

Describe the solution you’d like

1. Use the sideEffects: false flag (or sideEffects: [files that do have side effects]) in the distributed package.json
2. Export another Quasar object in src/index.all.js that does not reference components:

export const QuasarBasic = {
  version: __QUASAR_VERSION__,
  install (app, opts, ssrContext) {
    installQuasar(
      app,
      { ...opts }, // No reference to components and directives
      ssrContext
    )
  },
  lang,
  iconSet
}

1. Advanced users will need to alias quasar to quasar/src/index.all and add the necessary build configs:

resolve: {
        alias: {
            quasar: 'quasar/src/index.all',
        }
},
plugins: [
    new DefinePlugin({
        __QUASAR_VERSION__: JSON.stringify('Custom v2'),
        __QUASAR_SSR__: JSON.stringify(false),
        __QUASAR_SSR_CLIENT__: JSON.stringify(false),
        __QUASAR_SSR_SERVER__: JSON.stringify(false),
        __QUASAR_SSR_PWA__: JSON.stringify(false),
    }),
]

Doing this results in noticeably smaller bundles for me

Before:

After:

Alternative to step 3: Instead of requiring users to set up a custom build config, separate dist/quasar.esm.prod.js into their original modules so that tree shaking can be performed.

[stefanvanherwijnen]

Thanks Razvan,

It would be nice to have better support for e.g. unplugin-vue-components, but if that breaks existing setups that’s obviously a no-go. Maybe it can be added to the road map for a a future version.

The vite plugin has its limitations at the moment (no SSR) so unfortunately that’s not a solution for everyone that wants to use their own vite configuration. (which understandingly has a lower priority than official supported methods such as the CLI). I’m working on a solution but it requires some workarounds such as in the previous post.

[rstoenescu]

Hi,

Like I said, this is a non-issue. Tree-shaking is handled automatically, unless you are doing something that we don’t officially support anyway (like totally custom build system etc).

If using Quasar CLI, our Vite plugin or our Vue CLI plugin and it does not works, please post a repo with minimal reproduction, or directly attach a .zip file here.

Can’t change to sideEffects because it will break most people’s setups.