switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    imposter syndrome
    Imposter Syndrome
    Jun 20, 2022
    exposure to new and unfamilar things
    Exposure To New And Unfamiliar Things
    Jul 8, 2022

    Optimising Site Performance In Vue.js

    optimize site performance
    optimize site performance

    An issue every developer will face at least once in their career is making your app or website load and run faster. This however is not always a simple task, and most people have no idea where to even start looking.

    I have listed a couple solutions below with little titbits of information just to help you get started on your venture down the deep rabbit hole of site optimisation with an emphasis on Vue.js.



    Module Bundlers


    A common practice for reducing the size of any javascript-based application is using a module bundler. There are quite a few that exist but by the most popular and commonly used is Webpack.

    Webpack consolidates all your code and any external libraries into a single javascript file that can be referenced at the header of your application.

    While this is great since it means everything you need can be tucked neatly in a single place, it also affects the initial load time of your application significantly since as the project grows in scope, the size of the bundled file grows exponentially bigger as well which can become problematic with slow internet speeds.

    Here are a couple solutions to help mitigate this problem:



    Lazy-Loading


    The term lazy-loading in software engineering refers to the pattern of deferring the initialisation of an object or a part of an application until it is needed.

    Usually when we’re bundling our application, it results in one large Javascript file. However by lazy-loading our components, the code is split into the main file and smaller files called “chunks”, that are referenced by our bundler so it only needs to be loaded when the component is needed instead of at the get-go.

    The syntax for lazy loading components in VueJS is as follows:

    const LazyComponent = () => import('./LazyComponent.vue');

    Code Splitting


    One thing you may notice however is that this results in a file being generated with a random name and for every component that is lazy-loaded a new random file gets generated. This however feels like we’re just reverting back to our application before introducing webpack in the first place.

    But we can get around this issue by assigning our imports a chunkName. This bundles all the code with the same chunkName into the same chunk, this also has the added benefit of ensuring that all related components get loaded in at the same time.

    We achieve this by using “magic comments” to assign the chunkName on the code that is being imported.


    Example:

    const LazyComponent = () => import(/* webpackChunkName: "chunks/lazycomponent" */ './LazyComponent.vue');

    Here the chunk will be generated with the name “lazycomponent” within a folder called “chunks”.

    Prefixing the chunkName with the folder is simply to allow for better use when adding the file to your .gitignore file and is not necessary.

    If you want more in-depth explanation about how this works I highly recommend checking out these resources:

    Performance tricks with PWAs and Vuejs

    Module Bundlers Explained

    Contact us


      Related posts:

      laravel livewireLaravel Livewire what's new in vueWhat’s New In Vue sending files with auxiliary dataSimple Way To Send A File With Auxiliary Data Via Axios In VueJS development teamThe Weird And Beautiful JavaScript Language
      Share
      0
      Abduraghmaan Gabriels
      Abduraghmaan Gabriels
      Abduraghmaan is a young up-and-coming full-stack software engineer. He started his journey in the world of tech by modifying the small scripts in old Pokemon games and ended up falling in love with coding. His ultimate passion is bringing new people into the world of technology and teaching them the wonders of Software development.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165

      +61(0) 42 420 8911


      switchon@lavalamp.biz


      Unit 1 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy