Vue: Possível vazamento de memória quando v-for no modo de desenvolvimento

Criado em 17 jul. 2018 · 3Comentários · Fonte: vuejs/vue

Versão

2.5.16

Link de reprodução

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

Passos para reproduzir

Abra o codepen https://codepen.io/anon/pen/gjMgzG
Clique algumas vezes para listar 0 item, depois 1000
Veja o aumento da memória
Tente forçar GC (ícone de lixo) antes de medir
Tire instantâneos de heap na guia "Memória" do Chrome
Observe o uso de memória no gerenciador de tarefas Chome (shift esc)
Observe o uso de memória no gerenciador de tarefas do sistema operacional

O que é esperado?

Mesmo uso de memória após o coletor de lixo

O que realmente está acontecendo?

Apesar da guia "Desempenho" exibir o mesmo uso de memória, o instantâneo de heap "Memória" exibe um aumento de memória.
Além disso, os gerenciadores de tarefas do Chrome e do sistema operacional mostram que a memória só aumenta.

Piora quando:

Usando Vuei18n (mesmo sem tradução)
Ter componentes de filhos grandes

Testado em:

Windows 7 64 Bits
Chrome 67.0.3396.99 64 bits

Por favor, considere que:

Posso estar fazendo algo errado
Pode ser um problema do Chrome
Pode ser um problema de sistema operacional

improvement

Fonte

peluprvi

👍2

Comentários muito úteis

Estou com o mesmo problema, algum avanço sobre isso?

Rikhart em 23 out. 2018

👍2

Todos 3 comentários

Parece que há um vazamento apenas no modo de não produção. Você deve estar bem na produção

posva em 17 jul. 2018

Obrigado pelo retorno @posva .

Eu também criei um problema no vue-i18n, já que o uso de memória fica muito pesado ao usá-lo.
Estou usando o vue-virtual-scroller também, que destrói e cria muitos componentes ao paginar ou rolar a página.

Não sei o quanto isso pode estar relacionado, mas esses dois pacotes, juntamente com alguma estrutura de componentes complexos ou mais profundos, estão consumindo muito da memória, mesmo no modo de produção.

Olhando para o gerenciador de tarefas do Google, a guia do meu aplicativo aumenta em ~ 2.400K cada item que eu rolar para baixo / para cima (cada um é destruído / criado nos processos).
Em menos de um minuto, rolando para cima e para baixo, recebo quase 1 GB de uso de memória, modo de produção ou ferramentas de desenvolvedor fechadas ou após GC. E não desce muito após a rota.

Não estou acostumado com o código principal de vue ou vue-i18n, mas parece que a estrutura dos componentes instalados está sendo copiada para cada componente aninhado no aplicativo, e o GC não pode limpar isso depois de destruir os componentes aninhados. Pode ser a maneira como o vue-i18n se instala, realmente não sei. Os dados abaixo são o que me faz pensar sobre isso: