Reduzir payloads de JavaScript com a divisão de código

Houssein Djirdeh

Jeremy Wagner

Ninguém gosta de esperar. Mais de 50% dos usuários abandonam um site quando ele leva mais de três segundos para carregar.

O envio de grandes payloads de JavaScript afeta significativamente a velocidade do seu site. Em vez de enviar todo o JavaScript ao usuário assim que a primeira página do aplicativo for carregada, divida o pacote em várias partes e envie apenas o que for necessário no início.

Por que a divisão de código é benéfica?

A divisão de código é uma técnica que busca minimizar o tempo de inicialização. Quando enviamos menos JavaScript na inicialização, podemos fazer com que os aplicativos sejam interativos mais rapidamente, minimizando o trabalho da linha de execução principal durante esse período crítico.

Quando se trata das Core Web Vitals, reduzir os payloads de JavaScript transferidos por download na inicialização contribui para melhorar os tempos de latência na primeira entrada (FID, na sigla em inglês) e de interação com a próxima exibição (INP, na sigla em inglês). O raciocínio por trás disso é que, ao liberar a linha de execução principal, o aplicativo consegue responder às entradas do usuário mais rapidamente, reduzindo os custos de inicialização relacionados à execução, compilação e análise do JavaScript.

Dependendo da arquitetura do seu site, especialmente se ele depende muito da renderização do lado do cliente, a redução do tamanho dos payloads do JavaScript responsáveis pela marcação de renderização pode melhorar os tempos de Maior exibição de conteúdo (LCP). Isso pode ocorrer quando o recurso de LCP tem atraso para ser descoberto pelo navegador até que a marcação do lado do cliente seja concluída ou quando a linha de execução principal está ocupada demais para renderizar esse elemento da LCP. Ambos os cenários podem atrasar o tempo de LCP da página.

Medida

O Lighthouse exibe uma auditoria com falha quando é necessário um período significativo para executar todo o JavaScript em uma página.

Divida o pacote do JavaScript para enviar somente o código necessário para a rota inicial quando o usuário carregar um aplicativo. Isso minimiza a quantidade de scripts que precisam ser analisados e compilados, o que resulta em tempos de carregamento de página mais rápidos.

Os bundlers de módulos conhecidos, como webpack, Parcel e Rollup, permitem dividir seus pacotes usando importações dinâmicas. Por exemplo, considere o snippet de código a seguir, que mostra um exemplo de um método someFunction acionado quando um formulário é enviado.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

Aqui, o someFunction usa um módulo importado de uma biblioteca específica. Se esse módulo não estiver sendo usado em outro lugar, o bloco de código poderá ser modificado para usar uma importação dinâmica para buscá-lo somente quando o formulário for enviado pelo usuário.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

O código que compõe o módulo não é incluído no pacote inicial e agora é carregado lentamente ou fornecido ao usuário somente quando necessário após o envio do formulário. Para melhorar ainda mais o desempenho da página, pré-carregue blocos críticos para priorizar e buscar mais cedo.

O snippet de código anterior é um exemplo simples, mas dependências de terceiros de carregamento lento não são um padrão comum em aplicativos maiores. Normalmente, as dependências de terceiros são divididas em um pacote de fornecedores separado que pode ser armazenado em cache, já que não é atualizado com tanta frequência. Leia mais sobre como o SplitChunksPlugin pode ajudar você a fazer isso.

A divisão no nível da rota ou do componente ao usar um framework do lado do cliente é uma abordagem mais simples para o carregamento lento de diferentes partes do aplicativo. Muitos frameworks conhecidos que usam webpack oferecem abstrações para facilitar o carregamento lento do que mergulhar nas configurações por conta própria.