Learn and explore more about how to optimize the performance of your Vue JS large application structure. Sure shot vue js performance tips.

1. How to
Optimize the
Performance
of Vue js
Large
Application
Structure?
www.bacancytechnology.com

2. 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.

3. 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

4. Lazy Loading in Vue js
Code splitting based on Routes
Vue js Prefetch components
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
6. Vue.js Performance: Optimize Third-
party Library
7. Conclusion

5. Introduction
of Vue js App
Structure

6. 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.

7. Vue JS
Performance
Optimization:
The Hour of
Need

8. 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 end-
users 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.

9. Performance
Pitfalls in
Vue JS

10. 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.

11. Not using third-party libraries wisely
Overlooking Code Splitting and Lazy
Loading
Unwanted hits to API requests
Not structuring JS and CSS files
properly
Some of the common reasons behind Vue js
large application-
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.

12. How to Check
the Bundle
Size of your
VueJS app?

13. 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 webpack-
bundle-analyzer.
After running the command as mentioned
above, open the package.json file and add
this –

14. "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 –

15. 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.

16. Optimizing
the
Performance
of Vue js
Large
Application
Structure

17. Here are some VueJS performance tips that
you can implement to optimize the
performance of Vue.js application.
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.
1. Lazy Loading in Vue js

18. 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%.

19. 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.
// 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()
This is how you import
your JavaScript files, right?

20. 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.

21. 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())

22. 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.

23. 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.
// routing.js
import Dashboard from './Dashboard.vue'
import Contact from './Contact.vue'
const routes = [
{ path: '/', component: Dashboard }
{ path: '/contact, component: Contact }
]
2. Code splitting based
on Routes
Your routing file may look like
this-

24. 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.

25. // 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.

26. 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.
3. Vue js Prefetch
components

27. 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.

28. < link rel="prefetch" href="path-to-chunk-
with-modal-view" />
Whenever the user requests the ModalView
module, it will be prefetched already and
accessible instantly.

29. Vue.js
Performance:
Optimize Third-
party Library

30. 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 website-
data. For example, I’ve used lodash library,
and here is the information.

31. 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.

32. 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-
Before choosing any
library, ask these
questions to yourself;

33. 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.

34. 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.

35. 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
this-
main.[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

36. 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.

37. 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-of-
a-kind Vue js best practices and Vue.js
application development services. We are
globally acknowledged for offering
advanced vue.js application architecture.
Conclusion

38. Thank You