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 demora mais de três segundos para carregar.

O envio de payloads JavaScript grandes afeta a velocidade do seu site. significativamente. Em vez de enviar todo o JavaScript para o usuário assim que a primeira página do aplicativo for carregada, divida o pacote em várias peças e envie apenas o que é necessário logo 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 com mais rapidez, minimizando o trabalho da linha de execução principal durante esse período crítico.

Quando se trata das Core Web Vitals, a redução de payloads do JavaScript transferidos por download na inicialização contribui para melhorar os tempos de Interaction to Next Paint (INP). O raciocínio por trás disso é que, ao liberar a linha de execução principal, o aplicativo pode responder às entradas do usuário mais rapidamente, reduzindo os custos de análise do JavaScript, compilação e inicialização relacionados à execução.

Dependendo da arquitetura do site, especialmente se ele depende muito da renderização do lado do cliente, a redução do tamanho dos payloads JavaScript responsáveis pela marcação de renderização pode melhorar os tempos da Largest Contentful Paint (LCP). Isso pode ocorrer quando o recurso da LCP atrasa a descoberta pelo navegador até a conclusão da marcação do lado do cliente 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.

Medir

O Lighthouse exibe uma auditoria com falha quando leva muito tempo para executar todo o JavaScript em uma página.

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

Bundlers de módulo conhecidos, como o webpack, Parcel e A consolidação permite dividir pacotes que usam importações dinâmicas. Por exemplo, considere o snippet de código a seguir, que mostra um exemplo de Método someFunction que é acionado quando um formulário é enviado.

import moduleA from "library";

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

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

Aqui, someFunction usa um módulo importado de uma biblioteca específica. Se este módulo não estiver sendo usado em outro lugar, o bloco de código pode ser modificado para usar uma importação dinâmica para buscá-lo somente quando o formulário é 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 tem carregamento lento ou é fornecido ao usuário somente quando necessário o envio do formulário. Para melhorar ainda mais o desempenho da página, pré-carregue blocos essenciais para priorizá-los e buscá-los mais rapidamente.

Embora o snippet de código anterior seja um exemplo simples, o carregamento lento de aplicativos dependências não é um padrão comum em aplicativos maiores. Normalmente, a terceira as dependências de parte são divididas em um pacote de fornecedor separado, que pode ser armazenado em cache já que elas não são atualizadas com tanta frequência. Você pode ler mais sobre como o SplitChunksPlugin pode ajudar você a fazer isso.

Dividir 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. Muitas frameworks conhecidos que usam webpack fornecem abstrações para tornar o carregamento lento mais fácil do que mergulhar nas configurações por conta própria.