Disabling import strategy

beets

Just thought I’d share this tip. Quasar/app v2+ by default uses importStrategy: 'auto' but doesn’t provide a way to disable it and manually specify what components to include like we used to be able to do pre v2.

Today, I was checking out my bundle, and noticed a component I didn’t use was still in the bundle. Turns out quasar cli is searching with a regex for strings like q-select, q-btn, etc and including them if found. I had a comment such as // Use this instead of q-select and that caused q-select to be bundled even though I didn’t use it at all!

Here’s how I disabled this behavior:

// quasar.conf.js

module.exports = function (ctx) {
  return {
  
    // ...
    
    framework: {
      
      // ...
      
      importStrategy: 'auto', // keep this as auto
        
      components: [ // manually specify components
        'QLayout',
        'QHeader',
        'QFooter',
        'QDrawer',
        'QPageContainer',
        'QPage',
        'QInnerLoading',
      ],
      directives: [ // manually specify directives
        'ClosePopup',
        'Ripple',
      ],
      plugins: [
      ],
    },
    
    // ...
    
    build: {
    
      // ...

      extendWebpack(cfg, { isServer, isClient }) {
        if(isClient) {
          // delete the auto import loader
          for(const rule of cfg.module.rules) {
            if(rule.use.length && rule.use[0].loader.endsWith('loader.auto-import-client.js')) {
              rule.use.splice(0, 1)
              break
            }
          }
        }
      },
    },

    // ...

  }
}

I hope it helps someone who is trying to reduce their bundle size.

beets

As another bundle-size tip, I also decided to only put the most used components / directives in quasar.conf.js, and import less used quasar components / directives directly into my components. For example:

// MyComponent.vue

import { QScrollObserver, QResizeObserver, TouchPan } from 'quasar'

export default {

  // ...

  directives: {
    TouchPan,
  },
  components: {
    QScrollObserver, 
    QResizeObserver,
  }
}

Then in quasar.conf.js, I disabled the vendor chunk:

vendor: {
  disable: true,
}

This resulted in many of my pages having about 25% less Javascript.

beets

And for visual people, here’s a before / after of webpack analyze:

webpack

No More Posting New Topics!

Disabling import strategy