O jogo tinha acabado, mas não pude deixá-lo ir. Ele continuou me incomodando. Foi o Vue.js? Foi o Netlify? Era nosso código hacky? Eu tinha que descobrir.

O garoto gamer em mim sempre teve uma vontade eterna de fazer videogames. Recentemente, pude satisfazer esse desejo quando participei do meu primeiro Global Game Jam há alguns meses. Minha equipe e eu construímos um jogo chamado “ZeroDaysLeft” para a web como um único aplicativo de página usando Vue.js. O jogo tinha um tema verde, pensamos no impacto ambiental que o capitalismo tem na terra e queríamos colocar um giro informativo sobre ele. Não há muitos jogos feitos usando o Vue.js. Minha equipe estava um dia atrasada e depois de um jogo literal de pedra-papel-tesoura para escolher nossa estrutura, corremos para codificou e no final de semana começou nosso jogo funcionando. Localmente, tudo funcionou muito bem. Naturalmente, estávamos orgulhosos do nosso código Frankenstein e queríamos compartilhá-lo com o mundo.

 

 

Havia apenas um problema — quando construímos o aplicativo e consultamos o domínio, era um pouco de memória. Ele mal funcionou e todas as máquinas em que tentamos executá-la ficariam no inferno de processamento — até mesmo meu sistema baseado em processador Intel i7 falharia. As restrições de tempo do jogo nos trouxeram de volta à realidade, e decidimos deixar de lado nossos problemas de desempenho de produção para que pudéssemos pelo menos lançar um jogo completo em nossos dispositivos. Como quase todos os projetos “concluídos”, esquecemos no dia seguinte.

Só que não pude deixá-lo ir. Ele continuou me incomodando. Foi o Vue.js? Foi o Netlify? Era nosso código hacky? Eu tinha que descobrir.

 

Investigando a desaceleração

 

Comecei com um teste rápido usando o Lighthouse. Felizmente, o Firefox tem um complemento de navegador para isso. Isto é o que eu tenho de volta.

 

 

89% não é ruim. Na verdade, comparado com muitos sites amplamente utilizados, é decente. O teste menciona problemas potenciais como o índice de velocidade e as primeiras tintas contentes e significativas. Teoricamente, lidar com isso tornaria a pontuação mais alta, mas não necessariamente melhoraria o enorme problema de desempenho dos aplicativos. Temos alguns ativos de imagem e áudio, embora nenhum deles seja grande o suficiente para causar enforcamento. Poderíamos otimizar demais esses ativos já otimizados, mas isso provavelmente não nos ajudaria em nada.

O teste não nos ofereceu nenhuma visão real sobre o que poderia estar causando esse problema de desempenho. Neste momento, eu estou pensando “é Vue?” Não tenho razão para pensar assim, mas seria tolice não verificar. Eu checo o console para o local implantado e ele está em branco. Avisos não são geralmente exibidos em produção. Quando faço o mesmo localmente, sou atingido na cabeça por alguns avisos de Vue.

 

 

Como a maioria dos desenvolvedores, minha opinião sobre os avisos do console é que eles são apenas isso — avisos e não erros — então minha atenção está mais focada em outra coisa. Eu guardo a esperança de que acabar com esses avisos poderia resolver meus problemas de produção. Decidi ir um pouco mais fundo em cada um deles e consertá-los.

Todos esses avisos vieram de um componente que criei para exibir opções Cards.vuede modo que o componente pode precisar de muitas regravações.

 

Decidi atacar esses avisos de console em ordem.

 

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

 

found in

 

— Cards at src/components/Cards.vue

 

Vue.js tem um monte de diretivas que tornam o uso da estrutura mais intuitivo, como v-for, que rapidamente torna uma matriz como uma lista. Quando o usamos, precisamos ter uma :key permitir a reer renderização eficiente dos componentes. No entanto, estávamos usando um objeto como uma chave, que é um valor não primitivo e, portanto, causou esse erro. Decidi usar o index.description como uma nova chave, pois é uma string e faria uma reer renderização mais eficiente sempre que os valores mudassem.

 

[Vue warn]: Duplicate keys detected: ‘[object Object]’. This