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

Houssein Djirdeh

Atenção: uma ou mais demonstrações nesta página não funcionam mais, porque o Glitch encerrou a hospedagem.

Para acompanhar este codelab, abra este Glitch em uma segunda guia.

Observação: este codelab usa o Chrome DevTools. Baixe o Chrome se ainda não tiver feito isso.

A maioria das páginas da Web e dos aplicativos é composta por muitas partes diferentes. Em vez de enviar todo o JavaScript que compõe o aplicativo assim que a primeira página é carregada, dividir o JavaScript em vários blocos melhora o desempenho da página.

Este codelab mostra como usar a divisão de código para melhorar o desempenho de um aplicativo simples que classifica três números.

Medida

Observação: como o webpack é usado neste aplicativo, qualquer mudança feita no código vai acionar um novo build, o que pode levar alguns segundos. Quando o processo for concluído, as mudanças vão aparecer no aplicativo.

Como sempre, é importante medir o desempenho de um site antes de tentar adicionar otimizações.

1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
3. Clique na guia Rede.
4. Marque a caixa de seleção Desativar cache.
5. Recarregue o app.

71,2 KB de JavaScript só para classificar alguns números em um aplicativo simples. O que está acontecendo?

No código-fonte (src/index.js), a biblioteca lodash é importada e usada neste aplicativo. O Lodash oferece muitas funções utilitárias, mas apenas um método do pacote está sendo usado aqui. Instalar e importar dependências de terceiros inteiras quando apenas uma pequena parte delas é usada é um erro comum.

Otimizar

Há algumas maneiras de reduzir o tamanho do pacote:

1. Escrever um método de classificação personalizado em vez de importar uma biblioteca de terceiros
2. Use o método Array.prototype.sort() integrado para classificar numericamente
3. Importe apenas o método sortBy de lodash, não a biblioteca inteira.
4. Fazer o download do código para classificação somente quando o usuário clicar no botão

As opções 1 e 2 são métodos perfeitamente adequados para reduzir o tamanho do pacote (e provavelmente fariam mais sentido para um aplicativo real). No entanto, eles não são usados neste tutorial para fins de ensino 😈.

Observação: o conceito de remoção de código não utilizado é abordado em mais detalhes em um guia separado.

As opções 3 e 4 ajudam a melhorar o desempenho do aplicativo. As próximas seções deste codelab abordam essas etapas. Como em qualquer tutorial de programação, sempre tente escrever o código por conta própria em vez de copiar e colar.

Importe apenas o que você precisa

Alguns arquivos precisam ser modificados para importar apenas o método único de lodash. Para começar, substitua esta dependência em package.json:

"lodash": "^4.7.0",

por este código:

"lodash.sortby": "^4.7.0",

Agora, em src/index.js, importe este módulo específico:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

E atualize como os valores são classificados:

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

Recarregue o aplicativo, abra o DevTools e confira o painel Rede novamente.

Para esse aplicativo, o tamanho do pacote foi reduzido em mais de 4 vezes com muito pouco trabalho, mas ainda há espaço para melhorias.

Divisão de código

O webpack é um dos empacotadores de módulos de código aberto mais usados atualmente. Em resumo, ele empacota todos os módulos JavaScript (e outros recursos) que compõem um aplicativo da Web em arquivos estáticos que podem ser lidos pelo navegador.

O pacote único usado neste aplicativo pode ser dividido em dois blocos separados:

• Um responsável pelo código que compõe nossa rota inicial
• Um bloco secundário que contém nosso código de classificação

Com o uso de importações dinâmicas, um bloco secundário pode ser carregamento lento ou carregado sob demanda. Nesse aplicativo, o código que compõe o bloco só pode ser carregado quando o usuário pressiona o botão.

Comece removendo a importação de nível superior do método de classificação em src/index.js:

import sortBy from "lodash.sortby";

E importe-o no listener de eventos que é acionado quando o botão é pressionado:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

O recurso import() faz parte de uma proposta (atualmente no estágio 3 do processo TC39) para incluir a capacidade de importar dinamicamente um módulo. O webpack já inclui suporte para isso e segue a mesma sintaxe estabelecida pela proposta.

Observação: leia mais sobre como as importações dinâmicas funcionam neste artigo sobre atualizações da Web.

import() retorna uma promessa e, quando ela é resolvida, o módulo selecionado é fornecido, dividido em um bloco separado. Depois que o módulo é retornado, module.default é usado para referenciar a exportação padrão fornecida pelo lodash. A promessa é encadeada com outro .then que chama um método sortInput para classificar os três valores de entrada. No final da cadeia de promessas,catch() é usado para lidar com casos em que a promessa é rejeitada devido a um erro.

Atenção: em um aplicativo de produção, sempre trate os erros de importação dinâmica de maneira adequada. Uma mensagem de alerta simples como a usada aqui pode não ser a melhor experiência para informar ao usuário que algo falhou.

Observação: talvez você veja um erro de linting que diz: bash Parsing error: 'import' and 'export' may only appear at the top level. . Isso ocorre porque a sintaxe de importação dinâmica ainda está em fase de proposta e não foi finalizada. Embora o webpack já seja compatível com ele, as configurações do ESLint (um utilitário de linting do JavaScript) usado pelo Glitch ainda não foram atualizadas para incluir essa sintaxe, mas ela ainda funciona.

A última coisa que precisa ser feita é escrever o método sortInput no final do arquivo. Essa precisa ser uma função que retorna uma função que recebe o método importado de lodash.sortBy. A função aninhada pode classificar os três valores de entrada e atualizar o DOM.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

Monitoramento

Atualize o aplicativo uma última vez e fique de olho no painel Rede novamente. Apenas um pequeno pacote inicial é transferido por download assim que o app é carregado.

Depois que o botão é pressionado para classificar os números de entrada, o bloco que contém o código de classificação é buscado e executado.

Observe como os números ainda são classificados.

Conclusão

A divisão de código e o carregamento lento podem ser técnicas extremamente úteis para reduzir o tamanho do pacote inicial do aplicativo, o que pode resultar diretamente em tempos de carregamento da página muito mais rápidos. No entanto, há alguns pontos importantes que precisam ser considerados antes de incluir essa otimização no aplicativo.

Interface de carregamento lento

Ao carregar lentamente módulos específicos de código, é importante considerar como seria a experiência para usuários com conexões de rede mais fracas. Dividir e carregar um bloco de código muito grande quando um usuário envia uma ação pode fazer parecer que o aplicativo parou de funcionar. Por isso, considere mostrar algum tipo de indicador de carregamento.

Carregamento lento de módulos de nó de terceiros

Nem sempre é a melhor abordagem carregar lentamente dependências de terceiros no seu aplicativo, e isso depende de onde você as usa. Normalmente, as dependências de terceiros são divididas em um pacote vendor separado que pode ser armazenado em cache, já que não são atualizadas com tanta frequência. Leia mais sobre como o SplitChunksPlugin pode ajudar você a fazer isso.

Carregamento lento com um framework de JavaScript

Muitos frameworks e bibliotecas conhecidos que usam o webpack oferecem abstrações para facilitar o carregamento lento em comparação com o uso de importações dinâmicas no meio do aplicativo.

• Módulos de carregamento lento com o Angular
• Divisão de código com o React Router
• Carregamento lento com o Vue Router

Embora seja útil entender como as importações dinâmicas funcionam, sempre use o método recomendado pelo framework/biblioteca para lazy loading de módulos específicos.

Pré-carregamento e pré-busca

Sempre que possível, aproveite as dicas do navegador, como <link rel="preload"> ou <link rel="prefetch">, para tentar carregar módulos essenciais ainda mais cedo. O webpack é compatível com as duas dicas usando comentários mágicos em instruções de importação. Isso é explicado em mais detalhes no guia Pré-carregar blocos críticos.

Carregamento lento de mais do que código

As imagens podem representar uma parte significativa de um aplicativo. O carregamento lento de imagens abaixo da dobra ou fora da janela de visualização do dispositivo pode acelerar um site. Leia mais sobre isso no guia do Lazysizes.