Como vocês fazem para aumentar a velocidade de carregamento do Javascript?

[renedocket]

Olá pessoal, tudo bem?

Estou uma duvida relacionada ao carregamento do Javascript, hoje não estou utilizando nenhum framework, sendo assim tenho um grande problema de performance e velocidade.

Tenho o webpack básico configurado, mas não sei como posso melhorar esse cenário de otimização de bundle.

Vocês já tiveram esse problema?
Como vocês lidam com esse cenário caso estejam trabalhando com Js Vanilla?

[eduardosoareszup]

Bom dia, tudo bem?

Problema de performance pode ser várias coisas, primeiro temos que descobrir a causa. O que está fazendo demorar? São as requisições que você faz para o servidor? Vários laços de repetições entrelaçados? Várias chamadas ao serviço encadeadas? Qual o tamanho do seu arquivo JS final? Pode ser até um setTimeOut... Você tem alguma suspeita?

Descobrindo a causa fica mais fácil de ajudar.

[evertonthepaula]

Dois lugares de fácil acesso pra você começar:
https://browserdiet.com/calories/
https://developers.google.com/speed/pagespeed/insights/?hl=pt-br

E sem usar Framework eu pensaria em carregamento fracionado e assíncrono do Js, salvando em cache, isso pode te salvar alguns bytes, mas como o disse o Eduardo você tem muito provavelmente alguma coisa travando o carregamento do JS. Qual o tamanho do seu bundle final?

[ninetails]

Para aumentar a velocidade de carregamento há algumas estratégias, porém problema de performance nem sempre é aumentar a velocidade. É mais fácil diminuir sua aplicação deixando-a mais enxuta e rápida para carregar que querer aumentar coisa que geralmente é externa.

Eis uma lista de cabeça:

• Dividir código em mais chunks (usando code splitting)
• Após dividir, usar HTTP/2 para transitar esses splits paralelamente
• Usar algum CDN localizado no Brasil
• Diminuir requisições no geral pois podem ter scripts que estejam sendo chamados
• code-splitting também, tentando não carregar coisa que não é utilizada na página. Também pode ser utilizado pra css, para extrair css que são utilizados por cada página.
• Minificar código pra produção (provavelmente já faz, mas tente abrir o arquivo minificado e ver quem tá onerando mais seu bundle, dependendo dá pra encontrar inclusive códigos que não são de terceiros que podem ser otimizados)
• Já que usa webpack, use o webpack-bundle-analyzer para ver visualmente o que foi dito acima
• Achar alternativas de códigos de terceiros utilizados pela aplicação. Quem poderia ajudar é o Bundlephobia.
• Preferir libs de terceiros que permitem Tree Shaking
• Validar quais browsers serão de fatos suportados:
  • Configurar corretamente o @babel/preset-env para os navegadores suportados para puxar polyfills e transpilar somente do que é necessário
  • Ajustar shims, polyfills para serem chamados somente se necessário
• Adicionar Cache de PWA utilizando Service Worker auxiliaria em deixar um cache ativamente antes do cache do navegador
• Se vc tiver controle do servidor, configurar corretamente opções de cache, etag, expire time...
• Assets (não só imagens como também podem ter arquivos css e js) com estratégias específicas acima. Use o webpack para gerar arquivos com hashes diferentes para cada build com modificação.
• Usar os pre* do Google Chrome (prefetch, preconnect, prerender, preload...) para pelo menos antecipar navegações para quem o utiliza
• Carregar imagens somente se aparecem no viewport
• Diminuir requisições feitas a servidores (se for um SPA)
• Se não for SPA, renderizar o máximo possível do lado do servidor
• Analisar a execução do código usando os DevTools. Quanto tempo seu JS demora em cada parte: requisição, parse, execução...
• Gerenciar códigos de terceiro (ex: tracking/analytics, ads) que podem estar bloqueando a main thread e sendo executados antes do teu código
• Validar seu código se há trechos que deveriam ser assíncronos (exemplo bobo: while (true) { if (<esperando algo que deveria ser assíncrono>) { break; }} trocar por uma Promise...)

Por aí vai... o assunto é extenso.

Adicionando aos resources do @evertonthepaula:

• Blogs, posts etc do Addy Osmani
• Lighthouse
• GTmetrix
• Leituras no site do Google Developers

[eliseumds]

Maravilhosa resposta do @ninetails! Aprenda a utilizar ferramentas como Webpack, bundle analyser, Lighthouse e as abas Network e Performance do Chrome Devtools. Tão importante quanto adquirir essas habilidades é criar um hábito de estar medindo e reagindo (há ferramentas pra automatizar essas tarefas que podem rodar a cada commit, por ex).