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 se ele demorar mais de 3 segundos para carregar.

O envio de grandes payloads de JavaScript afeta significativamente a velocidade do seu site. 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 partes e envie apenas o 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, a redução dos payloads de JavaScript baixados na inicialização contribui para melhores tempos de Interaction to Next Paint (INP). O motivo 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 inicialização relacionados à análise, compilação e execução de JavaScript.

Dependendo da arquitetura do seu site, principalmente se ele depender muito da renderização do lado do cliente, a redução do tamanho dos payloads de JavaScript responsáveis pela renderização da marcação pode levar a tempos de Largest Contentful Paint (LCP) aprimorados. Isso pode ocorrer quando o recurso LCP é atrasado na descoberta pelo navegador até que a marcação do lado do cliente seja concluída ou quando a linha de execução principal está muito ocupada para renderizar esse elemento LCP. Os dois cenários podem atrasar o tempo de LCP da página.

Medir

O Lighthouse mostra uma auditoria com falha quando um tempo significativo é gasto para executar todo o JavaScript em uma página.

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

Bundlers de módulos populares, 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 que é disparado 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 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 de forma lenta ou fornecido ao usuário somente quando necessário após o envio do formulário. Para melhorar ainda mais a performance da página, pré-carregue blocos críticos para priorizá-los e buscá-los mais cedo.

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

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