Optimización de código para la optimización del rendimiento del proyecto Vue2.x

Como todos sabemos, el proyecto Vue utiliza enlace de datos bidireccional y DOM virtual. Es muy eficiente reemplazar DOM con renderizado frecuente basado en datos. Ha sido muy optimizado para desarrolladores, entonces, ¿por qué todavía hay optimización del rendimiento de Vue?

Debido a que Vue 2.x actualmente utiliza herramientas de construcción y empaquetado de terceros, como webpack, y es compatible con otros complementos de terceros, cuando usamos estas herramientas en el proyecto, diferentes operaciones pueden tener diferentes efectos en la ejecución o la eficiencia del empaque. A continuación, se detalla la dirección de la optimización.

1 Uso de v-if y v-show

• v-ifNo falsese renderizará DOMen la vista cuando no lo sea , truey se renderizará en la vista cuando no lo sea;
• v-show No importa cuál sea la condición inicial, el elemento siempre se representará en la vista y simplemente se cambiará según la propiedad de visualización de CSS.

Práctica recomendada: cambie con frecuencia para mostrar elementos ocultos v-showy rara vez cambie el usov-if

2 uso diferenciado de calculado y reloj

• computed: El atributo se calcula, se basa en otros valores de atributo, y los computedvalores 缓存solo dependen de los cambios de su valor de atributo, la siguiente adquisición se computedrecalcula solo cuando el valor del computedvalor;
• watch: Es más una función de "observación", similar a la devolución de llamada de monitoreo de algunos datos, cada vez que los datos monitoreados cambian, la devolución de llamada se ejecutará para operaciones posteriores;

Práctica recomendada: cuando necesitamos realizar cálculos numéricos y confiar en otros datos, debemos usar calculado, porque podemos usar la función de caché de calculado para evitar el recálculo cada vez que obtenemos un valor; cuando necesitamos ejecutar cuando los datos cambian Para operaciones asincrónicas o costosas, se debe usar watch. Usar la opción watch nos permite realizar operaciones asincrónicas (acceso a una API), limitar la frecuencia con la que realizamos la operación y establecer el estado intermedio antes de obtener el resultado final. Estas son cosas que las propiedades calculadas no pueden hacer.

3 v-for transversal debe agregar una clave al elemento y evitar usar v-if al mismo tiempo

Ahora, sin agregar el keyerror que normalmente se informaría, agregarlo keyfacilitará que el mecanismo interno de Vue encuentre con precisión la lista de datos. Al actualizar, el nuevo valor de estado se compara con el valor de estado anterior y la diferencia se ubica más rápido

v-forDe v-ifalta prioridad, si cada vez es necesario atravesar toda la matriz, afectará la velocidad, especialmente cuando la necesidad de renderizar una pequeña parte del tiempo, si es necesario, debe reemplazarse con una computedpropiedad.

<ul>
   <li v-for="user in adminUsers" :key="user.id">
       {
   
   { user.name }}
   </li>
</ul>

<script>
export default {
     
     
	data () {
     
     
		return {
     
      users: [] }
	},
	computed: {
     
     
		adminUsers: function(){
     
     
			return this.users.filter(()=>user.isAdmin)
		}
	}
}
</script>

4 Optimización del rendimiento de lista larga de pantalla pura

Para los datos que solo se utilizan para la visualización, no es necesario realizar un secuestro de datos vue, simplemente congele este objeto:

export default {
    
    
	data () {
    
    
		return {
    
    
			users: []
		}
	},
	created () {
    
    
		axios.get('/api/users').then((res)=>{
    
    
			this.users = Object.freeze(res.data.users)
		})
	}
}

5 Destrucción del evento

Cuando se destruye un componente de Vue, automáticamente limpiará su conexión con otras instancias, desvinculará todas sus instrucciones y detectores de eventos, pero solo para los eventos del componente en sí. Si dentro de js usamos addEventListeneotros medios no se autodestruirán, necesitamos escuchar para eliminar manualmente estos eventos cuando se destruye el componente, para no causar pérdidas de memoria, como por ejemplo:

created() {
    
    
    addEventListener('click', this.click, false)
},
beforeDestroy() {
    
    
    removeEventListener('click', this.click, false)
}

6 Carga diferida de recursos de imágenes

Usar vue-lazyloadcomplementos:
instalar

npm install vue-lazyload --save-dev

referencia de man.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 或自定义
Vue.use(VueLazyload, {
    
    
	preLoad: 1.3,
	error: 'dist/error.png',
	loading: 'dist/loading.gif',
	attempt: 1
})

Modificar la etiqueta img

<img v-lazy="/static/img/1.png">

7 enrutamiento de carga diferida

Vue es una aplicación de una sola página, y puede haber muchas rutas introducidas. De esta manera, los archivos empaquetados con webpcak son muy grandes. Al ingresar a la página de inicio, se cargan demasiados recursos y la página aparecerá en blanco, lo que no es propicio para la experiencia del usuario. Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código, y luego cargar los componentes correspondientes cuando se acceda a las rutas, será más eficiente. Esto aumentará considerablemente la velocidad de visualización de la primera pantalla, pero es posible que se reduzca la velocidad de otras páginas.

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
    
    
	routes: [
		{
    
     path: '/foo', component: Foo }
	]
})

8 Se introducen complementos de terceros a pedido

Cuando usamos bibliotecas de terceros, es mejor introducir la demanda global en lugar de la introducción, porque se incorporan más bibliotecas de terceros de complementos que se empaquetarán más lentamente, ya que Element UI, Ant Design of Vuey otras bibliotecas de interfaz de usuario:

Introducción a pedido

import Vue from 'vue';
import {
    
     DatePicker } from 'ant-design-vue';
Vue.use(DatePicker);

Introducción global

import Antd from 'ant-design-vue';
Vue.use(Antd);

9 Optimice el rendimiento de listas ilimitadas

Si está renderizando con una lista de desplazamiento infinita cargada, entonces la necesidad de usar 窗口化tecnología para optimizar el rendimiento, solo una pequeña parte de la región necesita renderizar contenido, reduciendo los componentes de renderizado y creando un tiempo de nodo dom. Puede consultar los siguientes proyectos de código abierto vue-virtual-scroll-list y vue-virtual-scroller para optimizar esta escena de lista infinita.
Todos fuimos a Githubver las instrucciones de uso del mismo.

10 SSR de renderizado del lado del servidor o renderizado previo

Generalmente, las aplicaciones de una sola página completan la representación de la página en el lado del navegador y los datos se obtienen del fondo enviando una solicitud; mientras que la representación del lado del servidor SSR es la estructura de los elementos de la página (HTML) que se ha construido en el servidor lado, y la página completa se devuelve al cliente.
Cuáles son las ventajas y desventajas de SSR:

• Mejor SEO: los rastreadores web pueden rastrear directamente la información de la página para incluirla en los motores de búsqueda, mientras que el contenido de las solicitudes asíncronas ajax no se incluirá, por lo que la información completa de la página presentada a través de SSR es más propicia para el SEO;
• La función de enlace de soporte solo es compatible beforCreatey createdel servidor debe estar en el entorno del servidor de nodo;
• Necesita una configuración de servidor más alta: debido a que incluye procesamiento de datos y procesamiento de páginas, los gastos del servidor aumentan

Si la velocidad de carga de la primera pantalla es relativamente alta o se requiere SEO, se puede utilizar el renderizado SSR.

PD: La optimización es solo una sugerencia. Debe considerar si es adecuada para su proyecto, incluida la dificultad de optimización, el alcance de influencia, los escenarios aplicables, si afecta a otros módulos, si el efecto de optimización es obvio, etc. ¡Lo que más te conviene es lo mejor!