Speed up performance with Vue.JS

[Rss Bot 1]

As with any component-based library, managing state in Vue can be tricky. While the application is small, it’s possible to keep things in sync by emitting events when values change. However, this can get brittle and prone to errors as the application grows, so it may be better to get a more centralised solution in from the start.

If you’re familiar with Flux and Redux, Vuex works much the same. State is held in one centralised location and is linked to the main Vue application. Everything that happens within the application is reflected somewhere within that state. Components can select what information is relevant to them and be notified if it changes, much like if it was part of its internal state. A Vuex store is made up of four things – the state, getters, mutations and actions.

Changing state

The state is a single object that holds all the necessary data for the entire application. The way this object gets structured depends on the project, but would typically hold at least one value for each view.

Getters work like computed properties do inside components. Their value is derived from the state and any parameters passed into it. They can be used to filter lists without having to duplicate that logic inside every component that uses that list.

The state cannot be edited directly. Any updates must be performed through mutation methods supplied inside the store. These are usually simple actions that perform one change at a time. Each mutation method receives the state as an argument, which is then updated with the values needed to change.

Mutations need to be synchronous in order for Vuex to understand what has changed. For asynchronous logic — like a server call — actions can be used instead. Actions can return Promises, which lets Vuex know that the result will change in the future as well as enabling developers to chain actions together.

Getters work like computed properties do inside components. Their value is derived from the state and any parameters passed into it

Working with commits

To perform a mutation, they have to be committed to the store by calling commit() and passing the name of the mutation method required. Actions need to be dispatched in a similar way with dispatch().

It’s good practice to have actions commit mutations rather than commit them manually. That way, all updating logic is held together in the same place. Components can then dispatch the actions directly, so long as they are mapped using the mapActions() method supplied by Vuex.

To avoid overcomplicating things, the store can also be broken up into individual modules that look after their own slice of the state.

 Each module can register its own state, getters, mutations and actions. State is combined between each module and grouped by their module name, in much the same way as combineReducers() works within Redux.pport.

Speed up the first load to improve performance

By default, the entire contents of the application end up inside one JavaScript file, which can result in a slow page load. A lot of that content is never used on the first screen the user visits. Instead it can be split off from the main bundle and loaded in as and when needed.Vue makes this process incredibly simple to set up, as vue-router has built-in support for lazy loading.

const AsyncAbout = () => import(‘./About.vue’);
const router = new VueRouter({
  routes: [
    { path: ‘/about, component: AsyncAbout }
  ] })

Vue supports using dynamic imports to define components. These return Promises, which resolve to the component itself. The router can then use that component to render the page like normal. These work alongside code splitting built in to webpack, which makes it possible to use features like magic comments to define how components should be split.

Want to make your website faster?

Developer Jason Lengstorf offers a workshop on modern front-end performance strategies and techniques

Jason Lengstorf is a developer who is all about improving performance in his code and his work life. To find out more why not attend his workshop at Generate New York from 25-27 April 2018. Here he will be teaching strategies and techniques for improving perceived load times, as well as actual load times, using only front-end techniques including:

• The skeleton loading pattern
• Better loading for static assets
• Lazy loading
• Service Workers
• Better build processes and more!

Want to join Jason? Then get your ticket now

Related articles:

• 7 expert tips for nailing web performance
• How to improve the performance of ecommerce sites 
• 3 top tools for testing web performance

View the full article