What are the optimizations for the launch of Vue project? Interview must learn

Time:2021-1-23

 

preface

Hello, everyone. I’m wangly19, a little expert in front-end fishing. Recently, I’ve been busy with open source projects, as well as the iteration problem of the company’s projects. As a result, the frequency of updating articles is a little low. Let’s talk about what I’m doing.

The first thing is to compare my castrated UI design and start the development of vue3.0, so I’ve been looking at vue3.0 recently. The second is the method library supporting UI, which is also a recent project of mine. It is a small thing produced by typescript. I hope it can help you.

Eleganceui framework: GitHub repository

This article is mainly to make a Vue performance optimization post, a reference document, and some collection documents for future projects. If you are in the project optimization, do a document reference.

development process

When developing a project, we should pay attention to some tips of the project. I will list some optimization methods that are often used. At the same time, the old rule is to check and fill the gaps.

Prior use of Vif

vIfAndvShowTheoretically, they are all used to show and hide elements, but one is directly used for DOM and the other is used for CSSdisplayTo operate, most of the time in the project I use it directlyvIfDirect substitutionvShow, only when DOM is frequently displayed and hidden, but this kind of scene is very rare. I only used it in information push priority, and it has been used in projectsWebSocketWe have encountered the scenario of pushing messages, and frequently push different types of notifications.

Don’t use vfor and Vif together

1、vForOur priority is actually higher thanvIFHigh, so when two instructions appear in a DOM, thenvForThe current list of renderings needs to be rendered once every timevIfIt’s a good judgment. And the corresponding list will change again, which seems very unreasonable. So when you need to synchronize instructions. Try to use the calculated properties. First, use thevIfUnnecessary values are filtered out first. He looks like this.
2. Front end technology is constantly updated. By the way, I’d like to give you some benefits. I’ll send you the latest enterprise level vue3.0/js/es6/ts/react/node and other practical video tutorials in 2020. If you want to learn, you can get them in 519293536 for free. Xiaobai is not allowed to enter!

//Calculation properties
computed: {
  filterList: function () {
  return this.showData.filter(function (data) {
    return data.isShow
  })
}
  
// DOM
  

  <li v-for="item in filterList" :key="item.id">
  {{ item.name }}
  li>
ul>
Copy code

 

 

Vfor key avoids using index as identification

In fact, we all know thatvForIt is not recommendedindexSubscript askeyThis is a very easy to understand knowledge point. As you can see from the figure, when index is used as the identifier and a piece of data is inserted, the key after it in the list changes, so the currentvForIt’s going to changeElementRe render, but they’re actually not just insertedElementThe data has not changed, which leads to unnecessary overhead. Therefore, try not to use index as the identification, but use the unique value in the data, such asidAnd so on.

 

 

Release component resources

What is a resource? Every thing created needs to consume resources. Resources are not created out of thin air, they are allocated. So, after the components are destroyed, try to destroy the resource blocks we have developed, such as setinterval, addeventlistener, etc. if you don’t release them manually, they will still occupy part of the resources. This leads to unnecessary waste of resources. After a few more visits, we can imagine that the occupancy rate of resources will certainly rise.

Added events

created() {
  addEventListener('click', Function, false)
},
beforeDestroy() {
  removeEventListener('click', Function false)
}
Copy code

timer

created() {
  this.currentInterVal = setInterval(code,millisec,lang)
},
beforeDestroy() {
  clearInterval(this.currentInterVal)
}
Copy code

Long list

Many long list scenarios will be involved in the project. Different from ordinary pagination, most of the front ends are doing thisInfinite listAt the same time, most of the novice front-end is through avForTraverse the data out, think a little more is to do a paging. Continue to request when scrolling to the bottomAPI 。 In fact, this is not considered properly. With the loading of data, there will be more and more DOM, which leads to the problem of performance overhead. When there are too many DOM on the page, it will inevitably cause some pressure on my client. Therefore, for long list rendering, it is recommended to remove the DOM, similar to the lazy loading mode. Only the DOM that appears on the view is the important dom. There are some good solutions on the Internet, such asvue-virtual-scrollerLibrary and so on, we can choose rationally.

Reasonable optimization of pictures

Pictures should not be strange, in the web page, there are often a lot of picture resources, these resources or large or small. When there are a large number of images in the dom of our page, it is inevitable that we will not encounter some slow loading problems, which will lead to the failure of loading images. Most of them are used on the InternetLazy loadingOnly whenDOM with imageAppear on the page will be loaded pictures, virtually played the role of diversion, the following is a set of practical solutions

  • Use of small iconsSVGOr font icon
  • Throughbase64AndwebpHow to load small pictures
  • Large images that can be accelerated by CDN should use CDN as much as possible
  • Most of the frames have images loaded lazily. Don’t bother to spend more time using them

Router on demand loading

For the lazy loading of routing, if not, then it’s time to learn again. There are two ways to load the route lazily. One is to load the route lazilyrequireThe other isimport 。 When the route is loaded on demand, the pressure of Vue service on the first load can be correspondingly reduced, and there will be no problemThe problem of super long white screen 。 Here are two ways to write lazy loading of routes:

//Require method
component: resolve=>(require(['@/components/HelloWorld'],resolve))

// import
component: () => import('@/components/HelloWorld')
Copy code

How to use UI framework

Make sure that when using UI frameworks such asElement , And DesignWhen waiting for the UI framework, the official on-demand loading components are used. The components of the current UI framework will be loaded only when it is actually used, instead of loading the entire component library at the beginning. We all know that a UI framework is actually very large, relatively larger than other things. Therefore, it is not only convenient for our developers, but also generates unnecessary overhead. But when the project cycle is developed, we have to rely on it. So it is recommended to use on-demand loading as much as possible. Reasonable stop loss of the project, if you do not care, very troublesome, then you can introduce the overall situation.

import { Button } from 'xxxx
Copy code

First screen optimization

As we all know, the first time you open Vue, if your project is large enough, it will take a long time to load resources for the first time. Because the resources are not loaded completely, the dom of the interface will not render, which will cause the problem of white screen. The user does not know that it is the loading problem at this time, so it will bring a bad experience. Therefore, we usually write a loading animation in public to tell the user that the web page is loading. When the page is loaded successfully, the experience of page rendering is much better than that of white screen boot. Therefore, it is recommended that you design a loading mode of your own company index.html Yes.

Project process

Minimize JS files

You can use webpack to process packaged JavaScript files to make them more compact. In configuration, you can do this

config.optimization.minimize(true);
Copy code

Image resource compression

Can passimage-webpack-loaderThe plug-in compresses the packaged image, which seems to improve the loading of the image. If you are worried about damaging the image, you can give up using it.

“ 

$ yarn add  image-webpack-loader

– – QAQ

config.module
  .rule('images')
  .use('image-webpack-loader')
  .loader('image-webpack-loader')
  .options({
    bypassOnDebug: true
  })
  .end()
Copy code

Package common code

Inwebpack4In this way, we canoptimization.minimizeAlthough I personally think that the effect of public code packaging on SPA applications is limited, it is better than nothing. No matter how small the text is, it is not meat. Therefore, the control of details is endless. However, in webpack 4, the common chunk plug is replaced by split chunk plug. Feel like a reminder from my friends.

new webpack.optimize.CommonsChunkPlugin({
  name: ['vendor','runtime'],
  filename: '[xxxxx].js'
})
Copy code

Delete precipitation code

UseTree-ShakingPlug in can clean up some useless code.

Dependency library CDN acceleration

It’s very interesting to see that some small partners use CDN to introduce some dependency packagesNiceAnd then I started using it. I willVue Axios EchartsAnd so on are separated. In the formal environment, there are some obvious improvements through CDN, so we can try.

CDN linkdi address: bootcdn

//After HTML introduces script tag. In the configuration of Vue, make a declaration

configureWebpack: {
  externals: {
    'ecarts':'ecarts' // configure using CDN
  }
}
Copy code

GZIP

This thing needs to be configured on the back end, of course, if you have operationsNginxYou can open it by yourself. Anyway, I think it will be greatly improved. See this article for details. I’m just going to go over this. Project Optimization Practice under Vue cli 2 & 3 — CDN + gzip + prerender

Afterword

Project optimization is very important, the slightest improvement is responsible for users. In addition, the front-end technology is constantly updated. By the way, I’d like to give you some benefits. I’ll send you the latest enterprise level vue3.0/js/es6/ts/react/node and other practical video tutorials in 2020. If you want to learn, you can get them in 519293536 for free. Xiaobai is not allowed to enter!

The text and pictures of this article are from the Internet and my own ideas. They are only for learning and communication. They do not have any commercial use. The copyright belongs to the original author. If you have any questions, please contact us in time

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]