How to Optimize the Performance of Vue js Large Application Structure?

How to Optimize the Performance of Vue js Large Application Structure?

www.bacancytechnology.com

Suppose you have worked hard on developing an entire Vue.js application. But didn’t prioritize its performance; now, your application takes a while to load, navigate, submit, or take any user actions. Do you think users would like such delayed experiences or prefer to stay a little longer on your Vue js application?

Sadly, the answer is No. According to statics, it has been proved that 53% user doesn’t choose to spend time on those applications which takes more than 3 seconds to load. Building an application with optimized performance will smoothen the user experience and gradually increase user interactions.

Unfortunately, most developers fail to understand the importance of performance and end up building an extensive application with performance issues. I assume you don’t want to be one of those developers. It’s challenging to develop an application, but it is more challenging to develop an optimized performance application. To lessen your challenges, I have come up with this blog post that will help you understand how you can optimize the structure of your Vue.js app

Table of Index 1. Introduction of Vue js App Structure 2. Vue js Performance Optimization: The Hour of Need 3. Performance Pitfalls in Vue js 4. How to Check Your Vue js application’s Bundle Size?

5. Optimizing the Performance of Vue js Large Application Structure Lazy Loading in Vue js Code splitting based on Routes Vue js Prefetch components 6. Vue.js Performance: Optimize Thirdparty Library 7. Conclusion

Introduction of Vue js App Structure

VueJS is the most popular and stable JavaScript framework for developing websites, but just like other frameworks, the performance will be compromised if you overlook it. If you are looking for sure shot Vue js performance optimization tips or just want to know vue best practices, for your large scale application you have chosen the correct blog. Without much ado, let’s discuss in detail how you can optimize the performance of Vue js large application structure.

It’s essential first to understand the Vue js app architecture. By knowing its importance, we can be aware of how crucial it is, and we would start taking it more seriously. So, let’s look at why there’s a need to optimize your large scale application.

Please keep in mind that optimization of any application is essential, but as this blog concerns, we’ll be discussing it.

Vue JS Performance Optimization: The Hour of Need

No programmer will ever want that even after coding thousands of lines, users don’t want to spend time on the application because of the time it takes to perform user actions.

Product owners around the world develop products for users, and these users are mainly concerned with their smooth interactions. It does not concern the endusers how much effort programmers have invested in Vue JS app architecture if they are not satisfied with Vue js speed and efficiency.

So, yes, that is why it becomes mandatory criteria to optimize the performance that will eventually satisfy the end-users’ needs.

Performance Pitfalls in Vue JS

Let’s look at how Vue js works and the significant reasons behind poor Vue performance.

The reasons for slowing down the Vue performance depend upon your Vue js app structure. For example, one of the significant reasons behind poor performance in Vue jS Single Page Applications (SPAs) may vary from the VueJS projects dealing with Server Side Rendering (SSR).

The primary and foremost reason any developer can think of whether the application is SPA or having SSR is bundle size. The larger the bundle size slower the Vue js performance. Thus we can conclude that bundle size is inversely proportional to the application performance.

Some of the common reasons behind Vue js large applicationNot using third-party libraries wisely Overlooking Code Splitting and Lazy Loading Unwanted hits to API requests Not structuring JS and CSS files properly Before discussing how to reduce the bundle size, let’s see how to check the size of the Vue js and Vue js enterprise application’s bundle size.

How to Check the Bundle Size of your VueJS app?

I’ll be showing you two ways to check the bundle size of the Vue js application.

1. To generate a report Generating reports give you a visual description of the sizes of various packages used. Further, you can figure out to replace any package which takes more space than expected. You can use the command build – report for generating the report of your application. Keep in mind that this command will build a report of the application which has installed webpackbundle-analyzer.

After running the command as mentioned above, open the package.json file and add this –

"build-report": "vue-cli-service build -report" And then execute this – npm run build-report

After performing all this, a file named – report.html will be created in the dist folder.On opening that file, you’ll observe this –

2. Run command – npm run build You will see something like this image.

Now, after finding the bundle size, the struggle is to reduce that. Without further ado, let’s proceed and explore the ways of Vue.js app performance optimization.

Optimizing the Performance of Vue js Large Application Structure

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

1. Lazy Loading in Vue js As per the name, Lazy Loading in Vue js is the method of loading the modules in your application lazily, i.e., when the user actually needs that module. Most of the time, there’s no need to load all the modules from the JavaScript bundle whenever users visit the website.

There are some components having modals and tooltips that can be loaded when needed. You won’t see the result if you’re dealing with two or three modals or tooltips but, assume that you have an extensive Vue application with so many modals and tooltips; loading them at a time can lessen your performance.

It is not at all worthy of loading the entire bundle every time the page loads. Thus, it loading helps you to divide the bundle and load them when it is used. This way, it saves time by not downloading and parsing the unnecessary code.

To check the actual JavaScript code being used in the website – 1. Click devtools 2. cmd + shift + p 3. Type coverage 4. Click record The URLs with red highlights are not in use and can be loaded lazily. By taking advantage of lazy loading, you can reduce the bundle size by 60%.

This was about what and why we should load components and modules lazily in large scale application; let’s explore How to enforce it.

We can use Webpack Dynamic Imports rather than regular imports to separate the chunk of modules that have to be loaded lazily.

This is how you import your JavaScript files, 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 node to app.js in its dependency graph and bundle it together by importing it in such a manner.

So, whenever the bundle is loaded, demo.js will be loaded irrespective of its need.

But, what if we want to load demo.js only as of the response of some user actions. In such a case, we will implement dynamic importing, telling the application to download this module only when needed.

Here is the modification was done to the above code for executing dynamic imports for testing Vue.js app // 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 instead of importing the Demo module directly, I have declared a function which indeed returns the import() function. And this is what we call dynamic importing, due to which the webpack will know that it has to keep this module in a separate file. The function getDemo(), which contains the dynamic import, returns the Promise. We are basically cutting off the node ( here Demo ) from the dependency graph and later downloading it when needed ( such as route changing or clicking ). Keep in mind that the modules imported in Demo.js will also be isolated from the bundle.

Lazy Loading in Vue js is one of the best practices to reduce bundle size and optimize performance. Develop a habit of knowing which modules you don’t need unless there’s an explicit user action and download them lazily for better performance.

2. Code splitting based on Routes Assume 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.

Your routing file may look 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 method, the components – Dashboard and Contact ( with lodash)- will be downloaded even when the user visits another page, where we neither want to download Dashboard nor Contact. It is because we have both the routes in the same bundle. You might think what is a big deal with downloading two extra pages. But, this matters when you’re dealing with large applications with huge bundles.

To avoid this unnecessary downloading of the components, we will use split the code.And for that, we will be having separate bundles for different routes which we follow the technique of dynamic imports.

Rather than importing the components directly, you will now pass the dynamic routes. 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 decrease your bundle size to its half! But for that, you need to be sure which components can be used with dynamic imports. Believe me, such vue js practice will help your application to be more performant.

3. Vue js Prefetch components Let’s move ahead and dive deeper into Vue js prefetch components is a technique to download the resources before the user requests the page. For example, if you are sure that most users will visit the product page from the category page, you can think of prefetching the product page. You need to keep in mind that only after the initial render prefetching can take place. Another benefit of prefetching is that it removes the unwanted consequences caused due to lazy loading without affecting performance.

For its implementation you just need to add < link rel="prefetch" href="url" /> tag.

Simple, right? But the case is different when dealing with webpack, which generates the bundle names based on the module’s order.

Luckily, webpack has magic comments to prefetch easily. Magic comments are comments affecting the build’s process. We need to use – /* webpackPrefetch: true */ for prefetching the modules. Just keep it in your dynamic imports as displayed below –

components: { ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue') } While executing the code, webpack will search for magic comments and add < link rel="prefetch" url="resource-url" /> in the head section.

< link rel="prefetch" href="path-to-chunkwith-modal-view" />

Whenever the user requests the ModalView module, it will be prefetched already and accessible instantly.

Vue.js Performance: Optimize Thirdparty Library

When you check how much is your bundle size and are surprised if it crosses the ideal number, it’s not always because of what you code; so many times, the reason is the usage of loaded third-party libraries. Yes, we all use third-party libraries without knowing their impact on our application’s performance. Our code might be a tiny part of the bundle size.

You can use bundlephobia to know how do different libraries can affect performance.

You just need to add the Vuejs library name to this fantastic website, and you’ll gain a lot of knowledge related to your websitedata. For example, I’ve used lodash library, and here is the information.

Isn’t this awesome to know more about the libraries and their effects on the performance.

If you want to know which Vue js libraries have more impact on your VueJS application, then you can click here to scan your package.json. Apart from this, I have already made clear the various methods for analyzing the bundle size.

Before choosing any library, ask these questions to yourself; Why do I want to use the library?

Do I need the whole library for my purpose?

What is the impact of the library I chose?

Do I have a performance-friendly way of using the library?

Let’s take a look at how I deal when I’m choosing a Vue library.

If I need some functions for my program for which I’ll like to install lodash library.But, as I’m aware of how much lodash would cost to the performance so rather than importing the whole library, I’ll just import the functions, like this-

import isEmpty from 'lodash/isEmpty` Trust me, making such small changes in different libraries will create a more significant and noticeable impact.

So far, we have dealt with the bundle size of VueJS large scale application and VueJS performance tips for the same. For optimizing performance, reducing bundle size is not the only solution. It’s essential to reuse some of the assets so that users don’t have to wait. In our next step, let’s see how to use the browser cache for reusing.

Using Browser Cache We have discussed enough regarding bundle size; in this last step, we will focus on caching the data.

Caching is a technique of storing selective data to access it quickly when requested.

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

You can observe this by yourself.

Open your developer tool and select the Network tab. Visit any website and reload it few times. You’ll notice that some of the static files like CSS, images, javascript, and HTML will have a memory cache, as shown below. This means that such files are being served from the memory cache.

As browsers are handling caches pretty well by themselves. You might think, what can we add to this? So, you just need to figure out which parts of your VueJS app structure change rarely compared to others so that we can cache those parts.

Assume the structure of your project to be like thismain.[hash].js – root component of your project common.[hash].js – common components of your project dashboard.[hash].js – dashboard specific components contact.[hash].js – contact specific components

The part that concerns us is common. [hash].js. We can have all the dependencies here, which are not likely to change often, and we can further use it for caching the data. By separating such components, you are saving your users’ time. You can visit here to read more about how to separate the dependencies into different parts.

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

Conclusion No matter how large scale application you have developed, it requires to be optimized at some point. If you are looking to hire VueJS developer for optimizing your Vue.js app to satisfying your end-users, then you are just one click away. Get in touch with Bacancy Technology to experience one-ofa-kind Vue js best practices and Vue.js application development services. We are globally acknowledged for offering advanced vue.js application architecture.

Thank You