Get More Done with Vue.js: Vue and Performance

Vue is fast

In this lesson, we’re going to look at a very important topic in the development industry today, performance. If you’re a front end developer, you should be concerned about performance when it comes to public facing websites. So how does Vue.js compare with other modern front end frameworks and what features does it have that we can take advantage of to improve performance in our webapps?

When talking about performance, we first need to understand what performance means when it comes to web development. Performance usually means two things, how fast our app loads and how fast it responds to our interactions. Vue actually does well in both categories of performance, and it compares favorably with other popular frameworks, like React.

To begin with, Vue 2.0 weighs 23kb when minified and gzipped, so it has a very small overhead. There is one feature of Vue we must be aware of when it comes to Vue’s file size however. During development, Vue provides warnings to help you avoid common errors and mistakes. But, these warnings aren’t needed in production and can increase the size of our file. In addition, some of these warning checks have runtime costs that can be avoided in production.

Vue is in development mode by default. If you are directly including Vue via a script tag and not a build tool, make sure to use the minified version (vue.min.js) for production. Alternatively, when using a build tool like Webpack or Browserify, they can enable Vue’s production mode so that warnings are stripped out during the build. If you are using vue-cli, its templates have this pre-configured for you.

The way you build your app in Vue can also have performance implications. If performance is a concern for you, pre-compiling Vue templates will help them render faster than using in-DOM templates or in-JavaScript template strings. The easiest way to pre-compile templates is to use Single-File Components, where the associated build setup automatically performs pre-compilation for you. I won’t go into them in depth here, but Single-File Components keep the code for your component all in one file, including HTML, CSS and JavaScript.

In large applications, you can divide your code into smaller chunks and only load a component from the server when it’s actually needed. One approach to this is to use Vue’s async components together with Webpack’s code-splitting feature.

You can use webpack’s code splitting to avoid forcing users to download your entire application to view a single page, but it still won’t be as performant as downloading a single, pre-rendered HTML file. We can achieve this in your Vue.js app with server-side rendering. Server-side rendering is fairly simple these days with Node.js and a server side framework like Express.js. There’s also Nuxt.js that simplifies server-side rendering in your Vue projects.

Prerendering generates static HTML files from a single page application for specific routes at build time. Prerendering in some cases is preferable to server-side rendering as it can improve SEO just as well as SSR, with significantly less setup. In other cases, prerendering can serve content faster and cheaper than SSR. You can also use webpack to add prerendering to your Vue.js app.

Comparison vs. React

I mentioned in the beginning, Vue compares well with modern frameworks like React. Both Vue and React utilize Virtual DOM to minimize the number of necessary DOM mutations, but Vue’s Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React’s.

Both Vue and React also offer functional components, which are stateless and instanceless – and therefore, require less overhead. When these are used in performance-critical situations, benchmarks show Vue is once again faster.

In React, when a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root. To avoid unnecessary re-renders of child components, you need to implement shouldComponentUpdate everywhere and use immutable data structures. In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

This means updates in unoptimized Vue will be much faster than unoptimized React and due to the improved render performance in Vue, even fully-optimized React will usually be slower than Vue is out-of-the-box.

Vue is also designed with performance in mind. This gives you another advantage in using it to develop your applications. If performance is a concern for you and you’re still skeptical, try it yourself and see what kind of results you get.

In the next and final lesson, I’ll be telling you about Vue’s developer tools and community. See you then.

By the way, I’m working on a larger course on Vue.js, so sign up for the email list using the form below to be notified when it launches!

Sign up to Get More Done with Vue.js

* indicates required