Webpack code splitting with dynamically imported node_modules.

Is your feature request related to a problem? Please describe. Dynamically imported components from ‘node_modules’ are not splitted from chunk vendor. We could use remove from ‘vendor’ property in quasar.conf.js but i found a better way to do that.

Describe the solution you’d like The issue comes from the current splitChunks config. optimization.splitChunks.cacheGroups.vendors.name is set to “vendor”, the webpack docs actually have a warning about that.

When assigning equal names to different split chunks, all vendor modules are placed into a single shared chunk, though it’s not recommend since it can result in more code downloaded.

Describe alternatives you’ve considered There is two solutions that i can think of.

1/ Set name to false/true resulting in vendor chunk named like this “vendors~app.[hash].js” and dynamically imported node_modules in separate chunks like expected.

2/ If we want to keep the vendor chunk named “vendor.[hash].js” we could use a function like this:

(_module, chunks) => {
  const allChunksNames = chunks.map((item) => item.name).join('~')
  if (allChunksNames) return 'vendor'
  else return !ctx.prod
}

[freddy38510]

Same results with latest v1.4

The component i try to remove from vendor chunk is a Quasar component (QTable). I dynamically import it like this:

export default {
  components: {
    QTable: () => import('quasar/src/components/table/QTable'),
  }
}

This component is lazy hydrated with a forked version of mine of vue-lazy-hydration. The fork is just an adaptation for spa prerendering.

// quasar.conf.js

vendor: {
  remove: ['quasar/src/components/table/QTable']
}

This resulting in:

With remove: ['quasar/src/components/table']:

Without quasar.conf.js -> vendor and optimization.splitChunks.cacheGroups.vendors.name set to false:

All of this built with latest version of Quasar/app Pkg quasar........ v1.5.9 Pkg @quasar/app... v1.4.0

[rstoenescu]

The new flag will be available in “@quasar/app” v1.4.2.