Os editores de downcodes trazem para você um guia prático sobre como otimizar arquivos JavaScript maiores que 1 MB. Arquivos JS grandes afetarão seriamente a velocidade de carregamento da página da web e reduzirão a experiência do usuário. Este artigo apresentará em detalhes uma variedade de métodos de otimização, incluindo compactação de código, divisão de código, trepidação de árvore, carregamento de CDN, carregamento lento, carregamento assíncrono, etc., para ajudá-lo a melhorar o desempenho da página da web.
Arquivos JS com mais de 1 MB podem ser otimizados e compactados por meio de vários métodos, como compactação de código, divisão de código, agitação de árvore, uso de CDN para carregar bibliotecas de terceiros, carregamento lento ou carregamento assíncrono. Essas tecnologias podem reduzir significativamente o tamanho do arquivo JavaScript, acelerar o carregamento de páginas da web, melhorar a experiência do usuário e melhorar as classificações de SEO.
Entre esses métodos, a divisão de código é uma estratégia particularmente importante. A divisão de código permite dividir um arquivo JS grande em vários arquivos menores e carregar esses arquivos somente quando necessário. A vantagem disso é que reduz a quantidade de dados no carregamento da primeira página, agilizando assim o carregamento da página. Ferramentas modernas de construção de front-end, como Webpack e Rollup, fornecem suporte de divisão de código facilmente configurável.
A compactação de código é a maneira mais direta e comum de reduzir o tamanho do arquivo JS. O processo de compactação funciona removendo todos os caracteres desnecessários do código-fonte (como espaços, novas linhas e comentários) e renomeando variáveis para reduzir o número de caracteres. Este processo não altera os resultados do código.
Compactação usando ferramentas e plug-ins: UglifyJS, Terser e Google Closure Compiler são várias ferramentas populares de compactação de JavaScript. A maioria das ferramentas modernas de construção de front-end (como Webpack e Gulp) fornece plug-ins ou formas de integrar essas ferramentas de compactação. Compactação automática durante o processo de compilação: integre as etapas de compactação ao processo de compilação automatizado para garantir que o código de produção seja sempre compactado. Isso evita a compactação diretamente no código-fonte e mantém o código-fonte legível e de fácil manutenção.A divisão de código permite separar sua base de código em partes e carregar apenas as partes correspondentes quando realmente necessário. Isso é especialmente importante para aplicativos maiores, pois pode reduzir o tempo de carregamento da primeira tela.
Use ferramentas de empacotamento de módulos, como Webpack: essas ferramentas fornecem opções de configuração simples para obter a divisão de código. Por exemplo, o Webpack implementa importação dinâmica por meio da sintaxe import(), possibilitando o carregamento de código sob demanda. Divisão baseada em roteador: Para aplicativos de página única (SPA), a divisão de código baseada em rota é muito comum. Carregar dinamicamente o script da página correspondente de acordo com a rota visitada pelo usuário, reduzindo o carregamento inicial de uma grande quantidade de código inútil.A agitação da árvore é uma técnica que reduz o tamanho final do arquivo, removendo partes não utilizadas do código. Isso requer que o código seja modular e use a sintaxe dos Módulos ES, pois isso pode ser analisado estaticamente durante o processo de construção e determinar quais exportações e importações são realmente usadas.
Configurar Webpack ou Rollup para agitação de árvore: Essas ferramentas geralmente habilitam automaticamente a agitação de árvore no modo de produção para ajudar a remover código não utilizado. Esteja ciente dos efeitos colaterais do código: evite efeitos colaterais ao escrever o código do módulo, pois eles podem impedir que as ferramentas removam corretamente o código não utilizado.Usar uma CDN (Content Delivery Network) para carregar bibliotecas de terceiros (como jQuery, React, etc.) pode reduzir a carga no servidor e reduzir o tempo de carregamento inicial do aplicativo. Isso também significa que os usuários podem carregar essas bibliotecas do cache, reduzindo ainda mais o tempo de carregamento.
Escolha um CDN com bom cache: alguns, como Google CDN ou Cloudflare, oferecem serviços de CDN para várias bibliotecas populares. Comparando auto-hospedagem com hospedagem CDN: Às vezes, dependendo da localização geográfica de sua base de usuários, a auto-hospedagem pode ser mais propícia ao controle e otimização de desempenho. Faça sua escolha depois de pesar os prós e os contras.O atraso ou o carregamento assíncrono de código JavaScript não crítico garante que esses códigos não bloqueiem a renderização da página. Essa abordagem é especialmente eficaz para recursos que só são necessários quando o usuário interage com eles.
Utilizando atributos async e defer: HTML