1. Project optimization in VUE:

Passing friends, you can click a like, pay attention to ~~~

1.1 Writing Habits

  1. Do not need to do reactive data, do not put in data

Don’t put all the data in data, only the data you need to respond to in data. If a data is placed in data, Vue adds a getter and a setter to the data. When you get the data, you call the getter, and when you set the data, you call the setter.

  1. SPA(Single Page Application)

Single page, not conducive to SEO search, the home page can use server rendering.

  1. Components that can be disassembled should be disassembled with as little granularity as possible

Improve usability and increase code maintainability; Reduce unnecessary rendering

  1. v-if v-show
    • V-show controls whether display V-show will render
    • V-if base will not render
    • If you can use v-if, use V-if
    • To frequently show a component hidden, use v-show
    • Use V-if if a component is shown and hidden infrequently

5, when using v-for, you must add key

In general, do not use index as key (for example, if the key value of the data changes during sorting, vUE will interpret this as a change in the data and re-render it).

  1. Object.freeze

It also implements data hijacking, freezing the data a frozen object can no longer be modified; If you freeze an object, you cannot add new attributes to the object, delete existing attributes, modify the enumerability, configurability, writability of existing attributes of the object, or modify the value of existing attributes. In addition, the stereotype of an object cannot be modified after it is frozen.

  1. Route lazy loading

Import a route when it is in use.

  1. Component lazy loading

{yyy: () => import(yyy)} Components :{yyy: () => import(yyy)}

1.2 The second type: loading

  • Images are lazy to load, request loading only when needed.
  • Third party modules import on demand, when using third party plug-ins, not using all the methods inside, we can import on demand, use that to import that

1.3 Category 3: Improving user experience

  1. Using skeleton screen, when the user’s network is not good, when sending a request, the page will display the general framework of the application, increasing the user’s experience.

  2. Pwa cache

When using weak networks, 2G, 3G networks, the content can be cached

1.3 The fourth category: SEO

You can use server-side rendering of the main page to facilitate SEO data crawling

If the network environment is very bad, it may come out white screen pre-rendering dead data

Heelo

through plug-ins to achieve SSR

1.4 Category 5: Optimization from the back-end perspective

  • The cache
  • The compression