Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to optimize the performance of Vue js applications", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to optimize the performance of Vue js applications" this article.

I. introduction

VueJS is the most popular and stable JavaScript framework for developing websites, but like other frameworks, performance can be affected if you ignore it.

Second, why do we need Vue JS performance optimization?

No programmer wants to spend time on the application, even after thousands of lines of coding, because it takes time to perform user actions.

Product owners around the world develop products for users whose main concern is their 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 end users put into Vue JS application architecture.

So, yes, that's why it becomes a mandatory standard to optimize performance that will eventually meet the needs of end users.

Third, the main reasons behind the poor performance of Vue

Let's take a look at how Vue js works and the important reasons behind the poor performance of Vue js.

The reason for the degradation of Vue performance depends on your Vue js application structure.

For example, one of the important reasons for poor performance in Vue jS single-page applications (SAS) may be different from VueJS projects that handle server-side rendering (SSR).

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

Some common reasons behind Vue js big applications-

Unwise use of third-party libraries

Ignore code segmentation and lazy loading

Unnecessary clicks on API requests

JS and CSS files were not built correctly

Before we discuss how to reduce the bundle size, let's take a look at how to check the bundle size of Vue js and Vue js enterprise applications.

How do I check the size of your VueJS application?

I'll show you two ways to check the size of your Vue js application.

1. Generate a report

Generate a report that visually describes the size of the various packages used. In addition, you can figure out how to replace any package that has more space than expected. You can use the command to generate reports to generate application reports. Keep in mind that this command builds a report of the application with webpack-bundle-analyzer installed.

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

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

Then perform this.

Npm run build-report

After doing all this, a file called "report .html" is created in the dist folder.

When you open the file, you will observe this

Vue.js application performance optimization gives you professional analysis + solution # yyds dry goods inventory # _ vue

two。 Run commands and npm run builds

We'll see an image like this:

Vue.js application performance optimization gives you professional analysis + solution # yyds dry goods inventory # _ vue_02

Now, after finding the size of the bundle, the struggle is to reduce it. Without further discussion, let's continue to explore ways to optimize the performance of Vue .js applications.

Fourth, how to optimize the performance of Vue js applications?

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

By name, lazy loading in Vue js is a way to lazily load a module in an application, that is, when the user actually needs the module. Most of the time, every time a user visits a website, there is no need to load all the modules in the JavaScript bundle.

Some components have patterns and tooltips that can be loaded when needed. If you are working on two or three modes or tooltips, you will not see the results, but suppose you have a wide range of Vue applications with so many patterns and tooltips; loading them at once will degrade your performance.

It's not worth loading the entire bundle every time the page loads. Therefore, it loads to help you divide the bundles and load them when you use them. In this way, it saves time by not downloading and parsing unnecessary code.

To check the actual JavaScript code used in the website

Click devtools

Cmd + shift + p

Type coverage

Click record

Meshes with red highlights are not used and can be loaded lazily. By taking advantage of lazy loading, you can reduce the bundle size by 60%.

This is about what and why we should install components and modules lazily for large-scale applications: let's explore how to execute it.

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

This is how you import the JavaScript file, right?

/ / demo.jsconst Demo = {testDemo: function () {console.log ("This is just a demo!")}} export default Demo// app.jsimport 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. Therefore, whenever the bundle is loaded, demo .js will load, no matter what it needs.

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

The following are changes to the above code to perform a dynamic import to test the Vue .js application

/ / app.jsconst getDemo = () = > import ('. / demo.js') / / later when some user action tasks place as hitting the routegetDemo (). Then ({testDemo} = > testDemo ())

Therefore, you will notice that I have announced a feature that does return to the import function instead of directly importing the demo module. This is what we call dynamic import, so Webpack will know that it must keep this module in a separate file. The function gets Demo (), which contains dynamic imports and returns promises. We basically cut off the node (shown here) from the dependency graph and then download it when needed (such as route change or click). Keep in mind that the module .js imported in the demo will also be separated from the bundle.

Lazy loading in Vue js is one of the best practices for reducing bundle size and optimizing performance. Get into the habit of knowing which modules you don't need unless you have clear user actions and lazily download them for better performance.

two。 Route-based code split

Suppose you have to develop a small VueJS site with two pages-dashboards and contacts. Even for these two pages, you need to implement the vue router in the project.

The routing file might look like this-

/ / routing.jsimport Dashboard from'. / Dashboard.vue'import Contact from'. / Contact.vue'const routes = [{path:'/', component: Dashboard} {path:'/ contact, component: Contact}]

Because of this standard coding method, users download components-- Dashboard and Contact (using lodash)-- even if they visit another page (we don't want to download Dashboard or Contact). This is because we have two routes in the same bundle. You might wonder what's the big deal of downloading two more pages. However, this is important when you are dealing with large applications with a large number of packages.

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

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

Instead of importing components directly, you will now use dynamic routing. 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 the bundle size to half its size! To do this, however, you need to determine which components are available for dynamic import. Trust me, this kind of vue js exercise will help your application to be more executive.

3.Vue js preloaded component

Let's take a closer look at the Vue js preload component as a technique for downloading resources before a user requests a page. For example, if you are sure that most users will access the product page from the category page, consider prefetching the product page. You need to keep in mind that prefetching can only be done after the initial rendering. Another benefit of prefetching is that it eliminates unwanted results due to delayed loading without affecting performance.

For its implementation, you just need to add tags. It's simple, isn't it? However, when dealing with Webpack, the situation is different, and Webpack generates bundle names according to the order of the modules. Fortunately, the webpack package comes with magic comments, which is easy to preload. Magic comments are comments that affect the build process. We need to use-/ * webpackPrefetch: true * / to prefetch the module. Just keep it in your dynamic import as shown below

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

When the code is executed, Webpack will search for magic comments and add them in the header section.

Whenever a user requests a ModalView module, it is pre-controlled and accessed immediately.

4. Optimize the third party library

When you check the size of the bundle and are surprised that if it crosses the ideal number, it's not always because of your code: most of the time, it's because of the use of loaded third-party libraries. Yes, we all use third-party libraries without knowing their impact on application performance. Our code may be a small part of the bundle size.

You can use bundlephobia to understand how different libraries affect performance. You just need to add the name of the Vuejs library to this wonderful site, and you'll gain a lot of knowledge about the site's data. For example, I have used the lodash library, and here is the information.

Wouldn't it be great to learn more about libraries and their impact on performance?

If you want to know which Vue js libraries have a greater impact on your VueJS application, you can click here to scan your package. In addition, I have identified various ways to analyze the size of the bundle.

Before you select any library, ask yourself these questions:

Why should I use the library?

Do I need the whole library to achieve my goal?

What is the impact of the library I choose?

Do I have a performance-friendly way to use the library?

Let's see what I do when I choose the Vue library.

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

However, I know how much impact lodash can have on performance, so I won't import the entire library, I'll just import functions, like this

Import isEmpty from 'lodash/ isEmpty`

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

So far, we have discussed the bundle size of VueJS large applications and the VueJS performance tips associated with it. To optimize performance, reducing bundle size is not the only solution. It is necessary to reuse some assets so that users do not have to wait. In the next step, let's look at how to reuse using the browser cache.

5. Use browser caching

We have had a full discussion about the bundle size; in the final step, we will focus on caching data.

Caching is a technique for storing selective data that can be accessed quickly upon request.

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

You can observe.

Open the developer tool and select the Network tab. Visit any website and reload it several times. You will notice that some static files, such as CSS, images, javascript, and HTML, will have in-memory caches, as shown below. This means that such files will be delivered from the in-memory cache.

Because the browser handles the cache itself is quite good. You might think, what can we add? So you just need to figure out which parts of the VueJS application structure rarely change compared to other parts so that we can cache them.

Suppose the project structure is like this-

Main. [hash] .js-Root component of the project

Common. [hash] .js-Common components of the project

Dashboard .[ hash] .js-Dashboard specific components

Contact. [hash] .js-contact a specific component

What we care about is common. We can have all the 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 visit here to learn more about how to divide dependencies into different parts.

6. Optimize and compress images

Pictures have a great impact on the package size of the application. When an application renders a fairly large picture, it actually increases the loading time of the application. What you can do is optimize your way to provide pictures. To do this, you compress the image locally or use cdn. Let's see how to achieve this-

Compress local image

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

Adobe Photoshop

Shrink O'Matic

Image Compressor

CompressNow

TinyPNG

Optimize CDN Ima

When you are working with applications that are used by a large number of media, it is recommended that you optimize the image on CDN. CDN provides transformation capabilities to reduce the image size to 70% without pigmentalizing and affecting UI. This technique is best if your application has 12 to 15 images. You can manage media through these platforms-

ImageKit

Cloudinary

These are all the contents of the article "how to optimize the performance of Vue js applications". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.