Disabling import strategy



  • 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.



  • 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.



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

    webpack


Log in to reply