This is the sixth day of my participation in Gwen Challenge

Since I joined the work, the project I have done most is background management system, and the technology stack I use is Vue. Therefore, today I will summarize how to optimize the performance of the project I have done. Using Vue to write projects is easy to get started with a relatively low threshold of entry, but to develop a fast flying project still need to learn some principles in depth. Vue project performance optimization can be roughly divided into code level optimization and architecture level optimization.

Optimization at the code level

  • V-if and V-show are used in different scenarios

    V-if is true conditional rendering, elements are not rendered until the condition is true for the first time, and components are destroyed and rebuilt during each switch

    V-show no matter what the condition is, the element will always be rendered, just switch based on CSS display, okay

    If the content is frequently changed, v-show is recommended; otherwise, V-if is recommended

  • V-if and V-for cannot be used together

    V-for has a higher priority than V-IF. If v-IF and V-FOR are used on the same label, V-IF will be executed every time in the loop, which wastes performance. Therefore, try to wrap an empty label on the outer layer to make a judgment first.

  • Watch and computed are used in different scenarios

    Computed is more of an observer of the cache function. One or more attributes can be computed to generate new values. When the dependent attributes change, new values will not be computed immediately but will be marked as dirty data. Applies when multiple attributes affect one attribute.

    Watch executes this function immediately when an attribute changes, which is suitable for the case where an attribute change immediately causes a series of operations.

  • V-for is bound to a key

    The special attribute of key is mainly used in the virtual DOM algorithm of Vue to identify VNodes when comparing old and new nodes. If keys are not used, Vue uses an algorithm that minimizes dynamic elements and tries to modify/reuse the same type of elements in place whenever possible. When a key is used, it rearranges elements based on the change in the key and removes elements where the key does not exist. Child elements with the same parent element must have unique keys, and duplicate keys can cause rendering errors.

  • Route lazy loading

    The IMPORT method of ES6 is used to load routes on demand, reducing the loading time of the first screen. A page is loaded only when the user clicks to redirect to the page.

  • Reusable code is extracted into separate components

    In the development of projects, we can try to separate some functions that have been used twice or more and package them into independent components, which will greatly improve the efficiency of development, reduce the maintenance cost in the later stage, and the code will be more elegant, without thousands of lines of code in a file.

  • Use keep-alive wisely

    Keep-alive is a component built into Vue that can preserve the state of contained components or avoid re-rendering, i.e. caching components.

Architecture level optimization

  • Use gzip compression

    Gizp compression is an HTTP request optimization that improves load speed by reducing file size. HTML, JS, CSS files and even JSON data can be compressed with it, reducing the size by more than 60%.

    1. Install the compression-webpack-plugin
    2. Write productionGzip: true in vue.config.js
    3. Nginx needs to be configured on the back end

This article just lists some simple and common optimization methods, there are many ways to optimize, but also have to learn, there are not enough places please give more advice!