[15.1] Lazy loading of components
-
You can simply register components once in
quasar.conf.js
, it does the lazy loading for you -
@benoitranque Wow, that’s cool!
-
Correction!
Seems I was wrong, you do not get lazy loading!
What you do get is reduced bundle size, as your bundle only includes components you use. This is due to how webpack works.What you do lazy load are large things like routes, when you use import:
component = () => import('pages/mypage')
-
@benoitranque Yeah, so when you would want lazyloading on a custom component you would still import and export the quasar components that are not yet part of the ones included in quasar.config.js in the custom component itself, so these will be loaded when you do
() => import('customcomponent')
from the router. Right? -
That would be correct. It is just quasar components that are all bundled together
-
So in order to lazy load quasar components you must load them individually on each of your custom components/pages. Including them on the config bundles them all together, right ?
-
No. They will be all bundled together anyways. Best put them in quasar.conf.js
-
Mmmh, quite a surprise there?! They are bundled anyways?
-
That is my understanding so far, hopefully a wild webpack expert will appear and clear things up. Think this is because as a npm package the y go into the vendor bundle. Your custom components (defined in src folder) you can lazy load
-
-
@rstoenescu said in [15.1] Lazy loading of components:
The docs indeed explain code splitting and lazy-loading but don’t mention how the components in quasar.conf.js fit into this picture.