5 extremely simple ways to significantly speed up your VueJS application
- Transfer
Hello. The translation of this article was prepared especially for students of the JavaScript Developer course , which starts next week.
Chui's voice
A little about me - my name is Vaibhav, I'm from Five2One. I have been involved in VueJS for 2 whole years (since the release of 1.0) and basically helped to create / train 3 of the largest VueJS code bases in Sydney. This code serves millions of people, so my task is not just to create scalable code patterns, but also to take great care of its performance.
You see, as a rule, small startups and code bases are oriented on quickly pushing the code to the light and delivering the product to the client, which we have succeeded in - you can evaluate our work on the website Five2one.com.au, but besides this, as engineers, our goal is to care about performance and scalability.
Let's get right to the point - talk about some simple ways to improve the performance of your VueJS application.
What we see here is a “functional” template that has no declared state and deals only with props. It can be easily created in a functional component based on Vue using the rendering method.
https://vuejs.org/v2/guide/render-function.html
If you read this, you will see the props transmission with
So, a simple fix for this solution is below: It
's that simple, you don’t have to worry about changing the template syntax, you you can stick with it while enjoying the luxury of Vue syntax.
Using keep-alive for dynamically loaded components.
Sometimes we load components on the fly with Vue. We can switch between components that load dynamically. So that we can maintain state and prevent data reloading when switching components, the DOMless shell is a good solution to speed up the process
This will be a little more obvious to most when you consider how the vDOM system works in Vue. The goal of vDOM is to act as an intermediate means of updating and track (very efficiently) isolated changes in the project user interface and run isolated re-renderings for these target components instead of redrawing the entire screen.
Often we can create a component that has a shell that is rendered multiple times, and some other part of the same template needs to do LOT of work whenever another part of the template is redrawn. A simple solution is to simply split the file into components. If the child is not dependent on the parent for data, he should be processed without problems.
Using anonymous functions in CTA events. Whenever an anonymous function is passed to the “onClick” buttons (I saw this pattern among developers who come from React, because this is one way in React to pass user data to a function), it is better not to pass an anonymous function. The reason is this.
Consider the example below:
What happens here is that every time a div grows in length (like a progress bar), all buttons will also be redrawn.
Technically, they should not, because nothing changes in them, right? No props updates or data updates, etc.
This is a trick, JS interacts with anonymous functions in memory, that is, every time a re-rendering occurs, a new instance of the anonymous function is created, and the comparison algorithm selects it as a new object, therefore, re-displays the buttons even if it is not needed.
Fortunately, Vue is so amazing that it is smart enough to understand that no function called on its own should be called until the event to which it is attached fires, so even if it's IIF, Vue makes it thunk. which delays execution.
If you want to be safe, it is always worth creating a closure that returns another function, so the wrapper function has only one instance and does not cause re-rendering.
This is just as simple, there are gray areas regarding it, and this is not a general solution. Use this method only when there are many components on the page and switching the display of the component is quick.
Yes, I'm talking about using v-if or v-show. There is a huge difference between the two. V-if = false never renders a component with the directive disabled. Therefore, if this component switches several times in a short period of time, this will affect performance, so using v-show in such situations works very well.
However, the catch is that in a situation where you add v-show to a component, and this component must perform a heavy operation when it is first rendered, then this operation will be performed regardless of whether the v-show is true or false. You should defer it using v-if until this component is really needed. Remember that v-show only sets the CSS display value for the displayed component: none if the component is still “rendered”.
However, even if this component has a large initial workload, if it constantly switches, and this method must be executed every time, it is better to do a v-show. It all comes down to user needs.
I hope this helps you all!
If you liked this, be sure to subscribe to similar topics:
twitter: twitter.com/ @veebuv
This is the translation. Waiting for your comments, friends.
Chui's voice
A little about me - my name is Vaibhav, I'm from Five2One. I have been involved in VueJS for 2 whole years (since the release of 1.0) and basically helped to create / train 3 of the largest VueJS code bases in Sydney. This code serves millions of people, so my task is not just to create scalable code patterns, but also to take great care of its performance.
You see, as a rule, small startups and code bases are oriented on quickly pushing the code to the light and delivering the product to the client, which we have succeeded in - you can evaluate our work on the website Five2one.com.au, but besides this, as engineers, our goal is to care about performance and scalability.
Let's get right to the point - talk about some simple ways to improve the performance of your VueJS application.
Number one
What we see here is a “functional” template that has no declared state and deals only with props. It can be easily created in a functional component based on Vue using the rendering method.
https://vuejs.org/v2/guide/render-function.html
If you read this, you will see the props transmission with
functional: trueSo, a simple fix for this solution is below: It
's that simple, you don’t have to worry about changing the template syntax, you you can stick with it while enjoying the luxury of Vue syntax.
QUICK REFERENCE: Since this is a functional component, its context does not exist, therefore, to access props, you must use props.name - thanks to Dinesh Madhanlal for mentioning
Second easy way
Using keep-alive for dynamically loaded components.
Sometimes we load components on the fly with Vue. We can switch between components that load dynamically. So that we can maintain state and prevent data reloading when switching components, the DOMless shell is a good solution to speed up the process
Third easy way
This will be a little more obvious to most when you consider how the vDOM system works in Vue. The goal of vDOM is to act as an intermediate means of updating and track (very efficiently) isolated changes in the project user interface and run isolated re-renderings for these target components instead of redrawing the entire screen.
Often we can create a component that has a shell that is rendered multiple times, and some other part of the same template needs to do LOT of work whenever another part of the template is redrawn. A simple solution is to simply split the file into components. If the child is not dependent on the parent for data, he should be processed without problems.
Fourth easy way
Using anonymous functions in CTA events. Whenever an anonymous function is passed to the “onClick” buttons (I saw this pattern among developers who come from React, because this is one way in React to pass user data to a function), it is better not to pass an anonymous function. The reason is this.
Consider the example below:
What happens here is that every time a div grows in length (like a progress bar), all buttons will also be redrawn.
Technically, they should not, because nothing changes in them, right? No props updates or data updates, etc.
This is a trick, JS interacts with anonymous functions in memory, that is, every time a re-rendering occurs, a new instance of the anonymous function is created, and the comparison algorithm selects it as a new object, therefore, re-displays the buttons even if it is not needed.
Fortunately, Vue is so amazing that it is smart enough to understand that no function called on its own should be called until the event to which it is attached fires, so even if it's IIF, Vue makes it thunk. which delays execution.
If you want to be safe, it is always worth creating a closure that returns another function, so the wrapper function has only one instance and does not cause re-rendering.
Magic 5th easy way
This is just as simple, there are gray areas regarding it, and this is not a general solution. Use this method only when there are many components on the page and switching the display of the component is quick.
Yes, I'm talking about using v-if or v-show. There is a huge difference between the two. V-if = false never renders a component with the directive disabled. Therefore, if this component switches several times in a short period of time, this will affect performance, so using v-show in such situations works very well.
However, the catch is that in a situation where you add v-show to a component, and this component must perform a heavy operation when it is first rendered, then this operation will be performed regardless of whether the v-show is true or false. You should defer it using v-if until this component is really needed. Remember that v-show only sets the CSS display value for the displayed component: none if the component is still “rendered”.
However, even if this component has a large initial workload, if it constantly switches, and this method must be executed every time, it is better to do a v-show. It all comes down to user needs.
I hope this helps you all!
If you liked this, be sure to subscribe to similar topics:
twitter: twitter.com/ @veebuv
This is the translation. Waiting for your comments, friends.