Vue: Posible fuga de memoria cuando v-for está en modo de desarrollo

Creado en 17 jul. 2018 · 3Comentarios · Fuente: vuejs/vue

Versión

2.5.16

Enlace de reproducción

https://codepen.io/anon/pen/KBMaOY

pasos para reproducir

Abra el codepen https://codepen.io/anon/pen/gjMgzG
Haga clic un par de veces para enumerar 0 elementos, luego 1000
Ver el aumento de la memoria
Intente forzar GC (icono de la papelera) antes de medirlo
Tomar instantáneas del montón en la pestaña "Memoria" de Chrome
Observe el uso de la memoria en el administrador de tareas de Chome (shift esc)
Observe el uso de la memoria en el administrador de tareas del sistema operativo

¿Lo que es esperado?

Mismo uso de memoria después del recolector de basura

¿Qué está pasando realmente?

A pesar de que la pestaña "Rendimiento" muestra el mismo uso de memoria, la instantánea del montón "Memoria" muestra un aumento de memoria.
Además, los administradores de tareas de Chrome y OS muestran que la memoria solo aumenta.

Empeora cuando:

Usando Vuei18n (incluso sin traducir)
Tener componentes de niños grandes

Probado en:

Windows 7 64 bits
Chrome 67.0.3396.99 64 bits

Por favor, considere que:

Puede que esté haciendo algo mal
Puede ser un problema de Chrome
Puede ser un problema del sistema operativo

improvement

Fuente

peluprvi

👍2

Comentario más útil

Tengo el mismo problema, ¿algún avance al respecto?

Rikhart en 23 oct. 2018

👍2

Todos 3 comentarios

Parece que hay una fuga solo en el modo de no producción. Deberías estar bien en producción

posva en 17 jul. 2018

Gracias por la devolución @posva .

También creé un problema en vue-i18n, ya que el uso de la memoria se vuelve demasiado pesado cuando se usa.
También estoy usando vue-virtual-scroller, que destruye y crea muchos componentes al paginar o desplazar la página.

No sé cuánto pueden estar relacionados, pero estos dos paquetes, junto con una estructura de componentes compleja o más profunda, están consumiendo una gran cantidad de memoria incluso en el modo de producción.

Mirando en el administrador de tareas de Google, la pestaña de mi aplicación aumenta en ~ 2.400K cada elemento en el que me desplazo hacia abajo / hacia arriba (cada uno se destruye / crea en los procesos).
En menos de un minuto, desplazándome hacia arriba y hacia abajo, obtengo un uso de memoria de casi 1 GB, el modo de producción o las herramientas de desarrollo cerradas o después de GC. Y no baja mucho después de la ruta.

No estoy acostumbrado al código central de vue o vue-i18n, pero parece que la estructura de los componentes instalados se está copiando para cada componente anidado en la aplicación, y el GC no puede limpiar eso después de destruir esos componentes anidados. Puede ser la forma en que vue-i18n se instala, realmente no lo sé. Los datos a continuación son lo que me hace pensar en eso: