No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [15.1] Lazy loading of components

    Help
    4
    12
    2295
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • benoitranque
      benoitranque last edited by

      You can simply register components once in quasar.conf.js, it does the lazy loading for you

      M 1 Reply Last reply Reply Quote 0
      • M
        MusicForMellons @benoitranque last edited by

        @benoitranque Wow, that’s cool!

        1 Reply Last reply Reply Quote 0
        • benoitranque
          benoitranque last edited by

          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')
          
          M 1 Reply Last reply Reply Quote 0
          • M
            MusicForMellons @benoitranque last edited by

            @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?

            1 Reply Last reply Reply Quote 0
            • benoitranque
              benoitranque last edited by

              That would be correct. It is just quasar components that are all bundled together

              1 Reply Last reply Reply Quote 0
              • D
                danielo515 last edited by

                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 ?

                1 Reply Last reply Reply Quote 1
                • benoitranque
                  benoitranque last edited by

                  No. They will be all bundled together anyways. Best put them in quasar.conf.js

                  1 Reply Last reply Reply Quote 0
                  • M
                    MusicForMellons last edited by

                    Mmmh, quite a surprise there?! They are bundled anyways?

                    1 Reply Last reply Reply Quote 0
                    • benoitranque
                      benoitranque last edited by

                      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

                      1 Reply Last reply Reply Quote 0
                      • rstoenescu
                        rstoenescu Admin last edited by benoitranque

                        app-lazy-loading—code-splitting

                        M 1 Reply Last reply Reply Quote 0
                        • M
                          MusicForMellons @rstoenescu last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post