Vue.js application performance optimization analysis + solution

Preface:

Let's say we're working really hard on developing an entire Vue.js application. But performance wasn’t a priority: Right now, our app takes a while to load, navigate, submit, or perform any user action. Should we assume that users want this delayed experience, or would they prefer to stay on the Vue js application longer?

Sadly, the answer is no. According to statistics, it has been proven that 53% of users will not choose to spend time on those apps that take more than 3 seconds to load. Building applications with optimized performance will smooth the user experience and gradually increase user interaction.

Unfortunately, most developers do not understand the importance of performance and end up building extensive applications with performance issues. I guess you don't want to be one of these developers. Developing applications is challenging, but developing optimized performance applications is even more challenging. To ease your challenge, I have come up with this blog about vuejs performance optimization which will help you understand how to optimize the structure of your Vue.js application and how you can manage vue js performance.

1. Introduction

VueJS is the most popular and stable JavaScript framework for developing websites, but like any other framework, if you neglect it, performance will suffer.

If you are looking for sure shot Vue js performance optimization tips or just want to know vue best practices for your large scale applications, you have chosen the right blog. Without getting into too much detail, let’s discuss in detail how to optimize the performance of your Vue js application.

It is crucial to understand Vue js application architecture first. By understanding its importance, we can realize how important it is and we will start to take it more seriously. So let’s look at why you need to optimize your large-scale applications. Remember, optimization of any application is essential, but as this blog focuses on, we will discuss Vue performance optimization.

2. Why do we need Vue JS performance optimization?

No programmer wants, even after coding thousands of lines, that users don't want to spend time with the application because of the time it takes to perform user actions.

Product owners around the world develop products for users, whose primary concern is smooth interaction. If programmers are not satisfied with the performance, speed, and efficiency of Vue js, it has nothing to do with how much effort the end-user has invested in the Vue JS application architecture.

So yes, that is why it has become a mandatory standard, to optimize the performance which will ultimately satisfy the end user's needs.

3. The main reasons behind Vue’s poor performance

Let’s see how Vue js works and the important reasons behind the poor performance of Vue js.

The reasons that slow down Vue performance depend on your Vue js application structure.

For example: One of the important reasons for poor performance in a Vue jS Single Page Application (SAS) may be different from a VueJS project that handles server-side rendering (SSR).

The main reason any developer can consider whether an application is a SPA or has SSR is the bundle size. The larger the bundle size, the slower the Vue js performance. Therefore, we can conclude that bundle size is inversely proportional to application performance.

Some common reasons behind large Vue js applications -

• Unwise use of third-party libraries
• Ignore code splitting and lazy loading
• Unnecessary hits on API requests
• JS and CSS files are not built correctly
  

Before discussing how to reduce the bundle size, let's see how to check the bundle size of Vue js and Vue js enterprise applications.

How to check the size of your VueJS app?
I will show you two ways to check the size of your Vue js application.

1. Generate a report

Generate a report that visually depicts the sizes of the various packages used. Additionally, you can find out how to replace any packages that take up more space than expected. You can generate an application report using the command Generate Report. Keep in mind that this command will build a report for an application that has webpack-bundle-analyzer installed.

After running the above command, open the packages.json file and add this content

"build-report": "vue-cli-service build --report"

Then execute this.

npm run build-report

After executing all this, a file named "report.html" will be created in the dist folder.
When you open the file, you will see this

Vue.js application performance optimization gives you professional analysis + solutions#yyds干货盘点# _vue

2. Run command and npm run build

We will see an image similar to this:

Vue.js application performance optimization gives you professional analysis + solutions #yyds干货盘点# _vue_02

Now, after finding the bundle size, the struggle is to reduce it. Without further discussion, let’s move on to exploring ways to optimize the performance of your Vue.js application.

4. How to optimize the performance of Vue js application?

Here are some VueJS performance tips that you can implement to optimize the performance of your Vue.js application.

1. Lazy loading in Vue js

As per the name, lazy loading in Vue js is a method of lazy loading modules in your application, i.e. when the user actually needs that module. Most of the time, there is no need to load all the modules in your JavaScript bundle every time a user visits your website.

Some components have patterns and tool tips that can be loaded when needed. If you are dealing with two or three modals or tooltips, you won't see the results, however, suppose you have an extensive Vue app with so many modals and tooltips; loading them all at once will slow down your performance.

It's simply not worth loading the entire bundle every time the page loads. So it load helps you to divide the bundles and load them when used. This way, it saves time by not downloading and parsing unnecessary code.

To inspect the actual JavaScript code used on your website

• Click devtools
• cmd + shift + p
• Type coverage
• Click record


The mesh with red highlights is not used and can be lazy loaded. By taking advantage of lazy loading, you can reduce your bundle size by 60%.

That’s all about what and why we should lazy load components and modules at scale: let’s explore how to do it.

We can use Webpack dynamic imports instead of regular imports to separate modules that must be lazy loaded.

This is how you import a JavaScript file, right?

// 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()

It will add the file demo.js as the application's node.js in its dependency graph and bundle it together by importing it in this way. So whenever the bundle is loaded, demo.js will load wherever it's needed.

However, what if we want to load demo.js only in response to some user action. In this case, we will implement dynamic imports, telling the application to download this module only when needed.

Following is a modification of the above code to perform dynamic import for testing Vue.js application

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

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

So you can notice that I've declared a function that does return the import function instead of directly importing the demo module. This is what we call a dynamic import, so Webpack will know that it has to keep this module in a separate file. Function getDemo Demo（）， which contains dynamic imports, returns a promise. We basically cut off a node (demonstrated here) from the dependency graph, and then download it when needed (like a route change or a click). Keep in mind that modules .js imported in the demo will also be separated from the bundle.

Lazy loading in Vue js is one of the best practices to reduce bundle size and optimize performance. Make it a habit to know which modules you don't need unless there is an explicit user action, and download them lazily for better performance.

2. Route-based code splitting

Suppose you have to develop a small VueJS website with two web pages - Dashboard and Contact. Even for these two pages you need to implement vue-router in your project.

The routes file might look something like this -

// routing.js
import Dashboard from './Dashboard.vue'
import Contact from './Contact.vue'

const routes = [
  { path: '/', component: Dashboard }
  { path: '/contact, component: Contact }
]

Due to this standard coding approach, even if the user visits another page (we don’t want to download either Dashboard or Contact), the components — Dashboard and Contact (using lodash) — will be downloaded. This is because we have two routes in the same bundle . You might be thinking, downloading two more pages is no big deal. However, it is important when you are working on a large application with a large number of packages.

To avoid unnecessary component downloads, we will use code splitting.

For this purpose, we will use different packages for different paths and we follow the technique of dynamic import.

Components will now be imported through dynamic routing instead of directly. Let’s see how to achieve this.

// routing.js 
const routes = [
  { path: '/', component: () => import('./Dashboard.vue') }
  { path: '/contact, component: () => import('./Contact.vue') }
]

By following this practice, you can reduce your bundle size to half its size! But for this you need to decide which components are available for dynamic import. Trust me, such vue js exercises will help your application perform better.

3.Vue js preload components

Let’s continue to delve deeper into Vue js preloading component is a technique to download resources before the user requests the page. For example, if you determine that most users will visit product pages from category pages, you might consider prefetching product pages. You need to remember that prefetching can only happen after the initial rendering. Another benefit of prefetching is that it can eliminate undesirable consequences of lazy loading without affecting performance.

For its implementation, you just need to add <link rel="pre-insert" href="url" /> tag. Pretty simple, right? However, this is not the case when dealing with Webpack, which generates bundle names based on the order of the modules. Luckily, webpack packages have magic comments that make it easy to preload. magic comments are comments that affect the build process. We need to use - /* webpackPrefetch: true */ to prefetch modules. Just keep it in your dynamic import as shown below

components:
  ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue')
}

While executing the code, Webpack will search for the magic comment and add <link rel="pre-insert" url="resource-url" /> in the head section.

< link rel="prefetch" href="path-to-chunk-with-modal-view" rel="external nofollow" />

Whenever a user requests a ModalView module, it is pre-handled and immediately accessible.

4. Optimize third-party libraries

When you check what your bundle size is and are surprised if it crosses the ideal number, it’s not always because of your code: many times the cause is the usage of loaded third-party libraries. Yes, we all use third-party libraries without knowing the impact they have on the performance of our application. Our code will probably be a fraction of the bundle size.

You can use bundlephobia to understand how different libraries affect performance. You just need to add Vuejs library name to this fantastic website and you will get a lot of knowledge related to the website data. For example, I have used lodash library and here is the information.

Wouldn’t it be great to learn more about libraries and how they affect performance?

If you want to know which Vue js libraries have a greater impact on your VueJS application, then you can scan your packages by clicking here. Apart from that, I have identified various ways to analyze bundle size.

Before choosing any library, ask yourself these questions:

• Why should I use a library?
• Do I need the entire library to achieve my purpose?
• What impact does my choice of library have?
• Is there a performance-friendly way for me to use the library?
  

Let's look at how I would handle this if I chose the Vue library.

If my program needs some functions, I want to install the lodash library.

However, I know how much of a performance hit lodash can have, so I don't import the entire library, I only import the functions, like this

import isEmpty from 'lodash/isEmpty`

Believe me, making such a small change in different libraries will have a more significant and noticeable impact.

So far, we have discussed VueJS bundle size for large applications and VueJS performance tips related to it. To optimize performance, reducing bundle size is not the only solution. Reusing some assets is necessary so that users don't have to wait. In the next step, let's see how to use browser cache for reuse.

5. Use browser cache

We’ve already had enough discussion about bundle size; in this final step, we’ll focus on caching data.

Caching is a technique for storing selective data so that it can be quickly accessed when requested.

The browser keeps the data in memory cache until the browser is not closed.

Can be observed.

Open the Developer Tools and select the Network tab. Visit any website and reload it a few times. You will notice that some static files such as CSS, images, javascript , and HTML will have memory cache as shown below. This means that such files will be served from the memory cache.

Since browsers handle caching pretty well on their own. You might be thinking, what can we add? So you just need to figure out which parts of your VueJS app structure rarely change compared to other parts so that we can cache those parts.

Assuming the project structure is like this -

• Main.[hash].js - the root component of the project
• Common .[hash].js - Common components of the project
• Dashboard.[hash].js - Dashboard specific components
• Contact.[hash].js - Contact specific components
  

The parts we care about are the common ones. We can have all our dependencies here, they are unlikely to change often, and we can further use it to cache data. By separating these components, you can save users time. You can learn more about how to divide your dependencies into different parts here.

6. Optimize and compress images

Images have a significant impact on your app's bundle size. When an application renders relatively large images, it can actually increase the loading time of the application. What you can do is optimize the way you serve images. For this you compress the images locally or use a cdn. Let us see how to achieve this -

• Compress local images

If your application consists of 6-7 images, you can serve it locally. Images contribute to file size, so it is necessary to compress images to reduce file size. Here are the top 5 free online tools for compressing images-

• Adobe Photoshop
• Shrink O'Matic
• Image Compressor
• CompressNow
• TinyPNG
  

• Optimize CDN images

When you are dealing with an application that uses heavy media, it is recommended to optimize images on a CDN. The CDN provides a transformation feature that can reduce image size up to 70% without pixelation and affecting the UI. This technique is best if your application has 12 to 15 images. You can manage media through these platforms -

• ImageKit
• Cloudinary
  

So, this was all about how to optimize your VueJS application performance. I hope all your questions and queries are answered through this blog.

in conclusion:
No matter how large an application you develop, you will need to optimize it at some point.

This is the end of this article about Vue.js application performance optimization analysis + solutions. For more relevant Vue.js application performance optimization analysis content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!