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