more sensible code splitting options for vendor.js in quasar

[yeus]

So.. I have a problem with the vendor option in quasar.conf.js. I am using some pretty large libraries with no tree-shaking available such as danfo.js which has things like xlsc, plotly and mathjs as dependencies which are each pretty large by themself. (see the image)

So I can already remove those libraries from vendor.js by doing something like this:

vendor: {
  remove: [
    'xlsx','mathjs','@tensorflow','plotly.js-dist-min','danfojs', 'table',
    'json-schema-traverse', 'ajv'
  ]
},

The problem is: that doesn't remove all depencies from danfo... There are way more dependencies involved here. In the following picture you can see that there is a whole bunch of small libraries which get added to vendor.js chunk those small libraries are all dependencies of amplify & danfo. Of course I could sit down and go through this list manually but I feel like there is a better way to do this...

I am importing danfo.js lazily through const danfojs = import('danfojs') so how do I make sure here that webpack recognizes to remove sub dependencies from vendor.js as well? maybe a "whitelist" whould help somehow? I tried somthing like:

vendor: {
  disable: true,

  add: [ 
    'quasar', '@vue', 'core-js'
  ],

}

to make sure I get the quasar packages etc.. in vendor.js but this doesn't work either, as disable:true also makes the "add" stop working.. I don't really understand the purpose of "add"

[yeus]

ok.. I have put some more research into this and basically found my own solution completely overriding quasar package bundling:

chainWebpack ( chain ) {
  if(ctx.prod) {
    chain.optimization.splitChunks({
      ...chain.optimization.get('splitChunks'),
      minSize: 20000,
      cacheGroups: {
        vendor_initial: {
          test: /[\\/]node_modules[\\/]/,
          priority: 20,
          reuseExistingChunk: true,
          name: 'vendor',
          chunks: 'initial',
        },
        vendor_whitelist: {
          test: /[\\/]node_modules[\\/](vue|quasar|axios|core-js)[\\/]/,
          priority: 20,
          reuseExistingChunk: true,
          name: 'vendor',
          chunks: 'all',
        },
      }
    })
  }
}

I would like to add this to the discussion... I think solution has several advantages:

• it gathers all 3rd party modules from the initial page in the vendor bundle. Additionally it adds the quasar and vue runtimes. This way the vendor.js bundle never gets too big...
• other 3rd party libraries imported lazily will get their own chunk built for them and will only get loaded lazily in the background on demand.
• this way I can combine fast initial loading times with a sensible vendor cache.
• my vendor.js package has now decreased from 2MB/gzipped to 160kb/gzipped. And almost every page of my SPA has almost instant load times while loading 3rd party modules in the background.
• caching is still very good as I separate 3rd party libs from my own code
• no code duplication.

I am somewhat of a newbie doing these things though. And would like to know If my list above is correct? Would it make sense to introduce such a configuration "by default" in quasar?

[yeus]

@franco-onevillas

No problems so far.. have used this for several projects since then! I believe that there might space for even more optimization but for me the above solution was enough.

[franco-onevillas]

Thank you for your answer and solution @yeus, I will try it right now!

[franco-onevillas]

Hey @yeus, sorry to bother you again. Did you face this issue?

Error: Multiple chunks emit assets to the same filename render-app.js (chunks 143 and 736)

I search for this error but I can't get a solution for it, specially because the log is not too useful. Thank you!

[yeus]

@franco-onevillas: I am sorry I have not encountered that issue.

where does the "render-app.js" come from in your configuration?

as an example: if I build my apps I get a result like this:

In this app, you can see it first has the "vendor.js" chunk with all the quasar & vue-related stuff and then it splits xlsx library and aws amplify and other 3rd party libraries into its own little chunks to be dynamically loaded at a later stage.

I am wondering what the render-app.js is doing here. Are you using the webpack loader? or the new vite configuration?

[franco-onevillas]

@yeus thanks for your help. I don't know where the render-app.js is coming from but I fixed it by just removing some packages inside the vendor object.

I was a bit confused but when I saw the bundle I understood that I didn't need to make too much change.

Thank you again, have a nice weekend!

[sonicviz]

Thanks for this. Vastly improved the loading time of my web app as well. Thanks!