This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

Route lazy loading

Vue Router 2.4.0+ Principle: Combined with Vue asynchronous component and Webpack code segmentation function, it can realize lazy loading of routes

const route = new VueRouter({
    routes:[{ path: '/home', components:()=> import("@/views/home.vue") }]
})
Copy the code

Keep-alive cache page

The following parameters make keep-alive more flexible include: only XXX is expected to be cached exclude: Only XXX is expected to be excluded Max: Maximum number of component instances to be cached

<! -- In the case of app.vue, deactivated components will be cached, --> <template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template>Copy the code

Some scenarios reuse DOM using V-if instead of V-show

V-show works best when you need to switch scenarios frequently, or when you don’t need to make repeated ajax calls

V-show: Displays and hides using the display in the CSS. When the display value is None, hides and compiles only once

V-if: is dynamic and controls the display and hiding by adding or removing DOM elements to the DOM tree. It is a constant process of destruction and creation, which can consume performance

V-for traversal avoids using v-if simultaneously

V-for has a higher priority than v-if. If you need to iterate through the entire array every time, it will affect performance. If conditions occur inside the loop, items that do not need to be displayed can be filtered out in advance using computed attributes

Long list performance optimization

Don’t add responsiveness to data that won’t change

Application scenario: In data or vuex, you can freeze objects using Object.freeze. For purely displayed big data, you can improve performance by using object.freeze ()

Virtual rolling

If it is a long list of large data, such as rendering 100,000 pieces of data, virtual scrolling can be adopted. When requesting such a large request as 100,000 pieces of data:

  1. Segmented request, similar to lazy loading
  2. Request the method through requestAnimationFrame
  3. This method is through the document. The createDocumentFragment () to create virtual function, one-time join into the tree and decrease the number of operations for the dom

(Segmented requests reduce the number of requests, virtual functions reduce dom operations) (the browser rendering frequency is 60 times per second, requestAnimationFrame is consistent with it, js execution interval is consistent with the browser rendering rearrangement, to optimize animation performance)

Picture problem:

  1. Iconfont, using CSS optimization, Ali Iconfont icon library
  2. Sprite figure
  3. Automatic tool, Panda station conversion, the principle is to use quantization to reduce unused color grids
  4. Converting to webP reduces volume

The CDN to accelerate

Http1.1 can only set up a maximum of six TCP requests, and CDN can cross this limit. The reason CDN can speed up performance is that distributed network nodes request the nearest node

Destruction of events

Timers, for example, are manually cleaned before components are destroyed to prevent memory leaks

created(){
    this.timer = setInterval( this.refresh, 2000 )
},
beforeDestroy(){
    clearInterval( this.timer )
}
Copy the code

Lazy loading of images

  1. Reduces the number of first page loads and optimizes performance
  2. When network requests are slow, add a placeholder image with low pixels to the image in advance, so that the layout is not cluttered, so that it does not stack together, or show a large blank space, so that the user experience is better

According to the need to introduce

Third party plug-ins such as Element and Echarts are introduced on demand

Functional component

Stateless components can be marked as functional components to optimize performance. In functional components, the time-consuming processing of the life cycle is no longer handled and is treated as a function, so the overall page efficiency is improved

Suitable for:

  1. A component that changes only depending on external data transfer
  2. The component does not have any internal lifecycle functions to handle

Features:

  1. No this (no instance)
  2. There is no responsive data
  3. It’s just a function that accepts some prop
  4. There is no life week
  5. Lightweight, high rendering performance, low rendering overhead, suitable for components that change only depending on external data transfer (presentation components, no logic and state changes)

batch

Use the requestAnimationFrame timer to execute the list in batches, preventing the list from being executed at once and blocking the page rendering.

Subcomponent split

Some heavy calculation, such as cyclic processing, the heavy part of the calculation is encapsulated into a sub-component, split into sub-components in the implementation

A local variable

Caching the calculated property as a local variable improves efficiency by not calling the calculated property every time it is used, but a local variable

computed: {
    num() { return 0 },
    result () {
      const num = this.num
    }
}
Copy the code

ssr

Compared to traditional SPA, server side rendering (SSR) can have better SEO, can render in a shorter time, this SSR optimization can involve more things, here is not specific, interested parties can learn by themselves

Webpack optimization

Webpack can be optimized for vue+ Webpack projects