Vue Performance - Better Writing of your code to be faster - Best Practices for Development

vue-performance.markdown

Lazy Loading Of Components

Lazy loading means to separate functionalities of the application in separate files. Eg. Modal window which is showing in the website, instead to load it everywhere in the website, we can load it only when needs.

Example:

// app.js
const getDemo = () => import('./demo.js')

// later when some user action tasks place as hitting the route
getDemo()
  .then({ testDemo } => testDemo())

With above code.. this file will be separated in chunk with only its code, and then when we call getDemo() function import(..) will return promise and will give us the functionality to which we can use.

Insead of:

// demo.js
const Demo = {
  testDemo: function () {
    console.log("This is just a demo!")
  }
}
export default Demo

// app.js
import Demo from './demo.js'
Demo.testDemo()

This will be loaded everywhere on the website.. which is not very good option if you are devloping large websites

Code Splitting with Vue-router - Routing/Routes - Lazy Loading Routes

If you have an very large website which is with multiple VueJS Routers, this will load all these files in your end bundle.

Example of router.js with all components in routing

// router.js
import Homepage from './Homepage.vue'
import Contacts from './Contacts.vue'

const routes = [
  { path: '/', component: Homepage }
  { path: '/contacts, component: Contacts }
]

instead of this.. you can write (see below) this routers with dynamic import, which means that your pages will be in separate bundles!

Example of vue router with separate bundles of pages

// router.js 
const routes = [
  { path: '/', component: () => import('./Homepage.vue') }
  { path: '/contacts, component: () => import('./Contacts.vue') }
]

In this situation, if some user do not open the /contacts page, the size of the homepage comoponent will not be rendered and the website will load faster!

Meta Prefetching Of Component Separate Bundles

Did you know that your browser has link property named - <link rel="prefetch" url="https://...bundle.js" /> ?

This link will gets the content of the given asset (eg. js file , css ,etc), the download happens with a low priority, so it doesn't interfere with more important resources..

So for example, if your user is in news list page and use set the lazyloaded bundle for single preview page in this link, this means that when he opens some article, the bundle will already be loaded and cached and the content will be visible immediately.

Optimization of Third-Party Libraries

If you are using library like a loadash for example.. maybe you will use some little part of all its functionalities. Its good to import with descructing only used parts from that libraries instead of using all the library.

Example:

import { isEmpty } from 'lodash/isEmpty`

Instead Of:

const _ = require('lodash'); 
_.isEmpty(val)

https://www.bacancytechnology.com/blog/vuejs-app-performance-optimization

https://www.bacancytechnology.com/blog/vue-js-best-practices