Lazy Loading Components in VueJS

As your app scales, it is likely that your compiled JS bundle file will get larger and larger. With the help of the Vue 3 defineAsyncComponent method, we can now only load a component if and when needed asynchronously.

Loading components using defineAsyncComponent

# ~/src/js/main.js

import { createApp, defineAsyncComponent } from 'vue';

...

const AudioBlock = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "AudioBlock" */
    './components/AudioBlock/AudioBlock.vue'
  )
);

...

const app = createApp({
  components: {
    AudioBlock,
    ...
  },
  ...
});

Other considerations to speed up page load speed

In addition to lazy loading of your components, there are other changes that you can make that will considerably reduce the size of the transferred data and as a result improve page load speed:

1. Image Optimisation
   This is the most obvious, and least time consuming optimisation. This simply requires that you check to ensure you don’t have large image downloads (Such as banner images) that are either large in size or unnecessarily large in resolution. Requesting optimised images from your designer can considerably reduce the image size. Caution: Ensure that you don’t over-optimise the images to a point where you compromise the quality of the images.
2. Template Caching
   In addition to browser caching, server-side caching, database caching, and object caching; page and content caching are other approaches to speeding up load times. These features are typically readily avaialble and enabled by default in established content management systems. As a result, generated pages and even blocks of content can be readily available and be served from the cache.
3. GZip Compression
   “gzip is a file format used for file compression and decompression. It is based on the Deflate algorithm that allows files to be made smaller in size which allows for faster network transfers”. Most popular web servers like Apache and Nginx support this compression format, and enabling this will also help improve page load times. See below example gzip compression configs in nginx.conf.

# nginx.conf

http {
    ...
    server {
        gzip                  on;
        gzip_comp_level       6;
        ...
    }
}

Testing

The easiest way to test if your changes have made an impact is using Chrome’s Network tab.

1. Open a new Incognito window in Chrome.
2. Inspect site, and select the Network tab.
3. Long-press the refresh button and select “Empty cache and hard reload”.
4. Compare the transferred data reading (Shown below) before and after component lazy loading.

In the example above, which was taken from a recent project in which I’ve implemented component lazy loading in addition to some of the other measures discussed, the results show a huge performance improvement where transferred data had dropped from 4.9 MB down to 1.7 MB.

Results

Given that you’ve explored the other measures discussed above, and have implemented component lazy loading, expect to see great performance gains, as your JS bundle will considerably reduce in size, especially if your app has several components that were previously all loaded on initial site load.

References

• Lazy Load Components in Vue with defineAsyncComponent
• GZip Compression
• VuejsLazy Loading