Ways to Optimize Our Vue Apps

Users will feel happier if the app we make loads faster.

This can be done with a few tricks with Vue apps.

In this article, we’ll look at what we can do to speed up our Vue apps.

Lazy Load Route Components

We can make our Vue route components load only when it’s needed.

To do that, we can use the JavaScript import function to import ou component.

For example, we can write:

import Vue from 'vue'
import Router from 'vue-router'

const Home = () => import('./routes/Home.vue');
const Settings = () => import('./routes/Settings.vue');

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/settings', component: Settings }
  ]
})

We have functions that returns promises for the component modules via the import function.

Since it’s not imported at build time, it’ll only be loaded when it’s needed.

Users have to download less code at the beginning so the loading speed will be faster.

The chunks can be controlled by adding the webpackChunkName comment.

For example, we can write:

const Profile = () => import(/* webpackChunkName: "profile" */'./routes/Profile.vue');
const ProfileSettings = () => import(/* webpackChunkName: "profile" */'./routes/ProfileSettings.vue');

We bundle the profile chunk with the webpackChunkName comment.

Minimize the Use of External Libraries

Reducing the number of libraries also reduce the bundle size, so the loading speed of our app will also be faster.

We can do a lot with JavaScript’s standard libraries.

For example, we can use native array methods instead of Lodash’s array methods.

Compress and Optimize Images

Images can be compressed a lot, so we should do that to reduce load time.

Also, we can load images from CDN so that we can serve them from a high-capacity server.

Lazy Load Images

Lazy loading images means that we load them only when we need to see them.

This can be done easily with the vue-lazyload package.

To install it, we run:

npm i vue-lazyload

Then in main.js , we add:

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

to register the plugin.

Then we can add:

<img v-lazy="image.src" >

in our template to use it. The v-lazy directive is made available from the plugin.

Reuse Functionalities Across Our App

Reusing functionality makes our app easier to change since we only have to change one place.

Also, we write less code so that the bundle is smaller.

Therefore, it’s faster to write and to faster to load for the user.

For example, with the VueNotifications library, we can write:

import VueNotifications from 'vue-notifications'
import miniToastr from 'mini-toastr'

miniToastr.init()

function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

Vue.use(VueNotifications, options)

to create a toast function and then use it to display all kinds of toasts with it.

mini-toastr is a small notification library we can use to display notifications.

Conclusion

We can optimize the speed of our Vue app easily with some easy tricks.