[15.1] Lazy loading of components
-
In 14.7 version the import and export of all quasar components happend within the custom Single File Components. As I understood things, this was to enable lazy-loading of the custom component. Using the 15.1 version is it sufficient to have the components you use in the quasar.conf.js file and still have lazy loading when these components are used within a custom component? Or do I still need to import and export quasar components within the respective custom component to enable lazy loading?
-
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.
