Tudo que você precisa saber sobre o código JavaScript Splitting

Sites modernos muitas vezes combinam todo o seu Javascript em um único, grande main.js. roteiro. Isso contém regularmente os scripts para todas as suas páginas ou rotas, mesmo que os usuários precisem apenas de uma pequena parte para a página que estejam visualizando.

Quando o JavaScript é servido dessa maneira, o desempenho de carregamento de suas páginas da Web pode sofrer - especialmente com web design responsivo em dispositivos móveis. Então, vamos corrigi-lo implementando o código JavaScript.

• Como codificar Javascript mais leve e mais leve

Qual problema o código divide resolver?

Quando um navegador vê um & lt; script & gt; Ele precisa gastar tempo fazendo o download e processando o javascript que você está se referenciando. Isso pode se sentir rápido em dispositivos high-end, mas o carregamento, a análise e a execução do código JavaScript não utilizado podem demorar um pouco em média dispositivos móveis com uma rede mais lenta e uma CPU mais lenta. Se você já teve que fazer logon no Coffee-shop ou no Hotel WiFi, você sabe que experiências de rede lentas podem acontecer com todos.

Cada segundo gasto esperando por JavaScript para terminar a inicialização pode atrasar em que usuários podem interagir com sua experiência. Este é particularmente o caso se o seu UX se basear em JS para componentes críticos ou mesmo apenas anexando manipuladores de eventos para simples peças da UI.

Preciso me incomodar com a divisão de código?

É definitivamente vale a pena se perguntar se você precisa coçar-se dividir (se você usou um simples Construtor de sites Você provavelmente não). Se o seu site requer o JavaScript para conteúdo interativo (para recursos como gavetas de menu e carrosséis) ou é um aplicativo de página única, dependendo de frameworks de JavaScript para renderizar a UI, a resposta é provável "sim". Se a divisão de código vale a pena para o seu site é uma pergunta que você precisará responder a si mesmo. Você entende sua arquitetura e como seu site carrega melhor. Felizmente há ferramentas disponíveis para ajudá-lo aqui. Lembre-se de que, se você está implementando mudanças em seu sistema de design, salve essas alterações em seu compartilhado armazenamento na núvem Então sua equipe pode ver.

Obter ajuda

Para aqueles novos em divisão de código JavaScript, Farol - O painel de auditorias em ferramentas de desenvolvedor de Chrome - pode ajudar a brilhar se este é um problema para o seu site. A auditoria que você vai querer procurar é reduzir o tempo de execução do JavaScript (documentado aqui ). Esta auditoria destaca todos os scripts na sua página que podem atrasar um usuário interagindo com ele.

PáginasPeed insights. É uma ferramenta on-line que também pode destacar o desempenho do seu site - e inclui dados de laboratório de dados do farol e do mundo real no desempenho do site do relatório de experiência do usuário do Chrome. Seu hospedagem na web. O serviço pode ter outras opções.

Cobertura de código em ferramentas de desenvolvedor do Chrome

Se parecer que você tem scripts dispendiosos que poderiam ser melhor divididos, a próxima ferramenta para ver é o recurso de cobertura de código nas ferramentas de desenvolvedor do Chrome (DevTools & GT; menu superior direito e GT; mais ferramentas e cobertura). Isso mede o quanto o JavaScript não utilizado (e CSS) é em sua página. Para cada roteiro resumido, DevTools mostrará os "bytes não utilizados". Este é o código que você pode considerar dividir e carregamento preguiçoso quando o usuário precisar.

Os diferentes tipos de divisão de código

Há algumas abordagens diferentes que você pode tomar quando se trata de codificar o Javascript. Quanto estes se aplicam ao seu site tendem a variar dependendo se deseja dividir a página / aplicação 'lógica' ou dividir bibliotecas / frameworks de outros 'fornecedores'.

Divisão de código dinâmico: Muitos de nós 'estaticamente' importam módulos e dependências javascript para que eles sejam empacotados em um arquivo no tempo de construção. A divisão de código 'dinâmica' adiciona a capacidade de definir pontos em seu JavaScript que você gostaria de dividir e preguiçosa carga conforme necessário. JavaScript moderno usa a dinâmica importar() declaração para conseguir isso. Nós vamos cobrir isso mais em breve.

Código do fornecedor dividindo: As estruturas e bibliotecas que você confiam (por exemplo, reagem, angular, vue ou lodash) são improváveis ​​de alterar nos scripts que você envia para seus usuários, muitas vezes como a 'lógica' para o seu site. Para reduzir o impacto negativo da invalidação de cache para usuários retornando ao seu site, você pode dividir seus "fornecedores" em um script separado.

Divisão de código de ponto de entrada: As entradas são pontos de partida em seu site ou app que uma ferramenta como webpack pode olhar para construir sua árvore de dependência. Divisão por entradas é útil para páginas em que o roteamento do lado do cliente não é usado ou você está confiando em uma combinação de renderização do servidor e do lado do cliente.

Para nossos propósitos neste artigo, estaremos nos concentrando na divisão de código dinâmico.

Obter as mãos com o código dividindo

Vamos otimizar o desempenho do JavaScript de um aplicativo simples que classifica três números Por meio de divisão de código - este é um aplicativo pelo meu colega Houssein DjiDeh. O fluxo de trabalho que usaremos para fazer com que nossa carga JavaScript seja rapidamente medida, otimize e monitore. Começa aqui .

Medição de performance

Antes de tentar adicionar quaisquer otimizações, primeiro vamos medir o desempenho do nosso JavaScript. Como o aplicativo Magic Sorter está hospedado no Glitch, estaremos usando seu ambiente de codificação. Veja como ir sobre isso:

• Clique no botão Show Live.
• Abra os DevTools pressionando a opção CMD + opção + I / Ctrl + Shift + i.
• Selecione o painel de rede.
• Certifique-se de desabilitar o cache é marcado e recarregue o aplicativo.

Este aplicativo simples parece estar usando 71,2 kb de JavaScript apenas para classificar alguns números. Que certamente não parece certo. Na nossa fonte src / index.js. , a biblioteca de utilitário Lodash é importada e usamos ordenar por - Um de seus utilitários de classificação - para classificar nossos números. O Lodash oferece várias funções úteis, mas o aplicativo usa apenas um único método a partir dele. É um erro comum instalar e importar toda uma dependência de terceiros quando, na verdade, você só precisa usar uma pequena parte dela.

Otimize seu pacote

Existem algumas opções disponíveis para aparar nosso tamanho de pacote JavaScript:

1. Escreva um método de classificação personalizado em vez de confiar em uma terceira biblioteca.
2. Usar Array.prototype.sort () , que é embutido no navegador.
3. Apenas importar o. ordenar por método de Lodash em vez de toda a biblioteca.
4. Baixe apenas o código para classificar quando um usuário precisa (quando eles clicam em um botão).

Opções 1 e 2 são apropriadas para reduzir o tamanho do nosso pacote - estes provavelmente fazem sentido para uma aplicação real. Para fins de ensino, vamos tentar algo diferente. Opções 3 e 4 ajudam a melhorar o desempenho do aplicativo.

Apenas importar o código que você precisa

Modificaremos alguns arquivos para importar apenas o único ordenar por método que precisamos de Lodash. Vamos começar a substituir nosso lodash. Dependência dentro de. Package.json. :

"lodash": "^4.7.0",

com isso:

"lodash.sortby": "^4.7.0",

No SRC / index.js, poderemos importar este módulo mais específico:

 JS
Importar "./style.css";
Importar _ de "Lodash";
Importe Sortby de "Lodash.sortby"; 

Em seguida, atualizaremos como os valores são classificados:

 JS
form.addeventlistener ("Enviar", E = & GT; {
  e.preventdefault ();
  Valores const = [input1.valuasnumber, input2.valueasnumber, input3.valueasnumber];
  const sortedvalues ​​= _.sortby (valores);
  const sortedValues ​​= Sortby (valores);
  resultados.innerhtml = `.
    & lt; h2 & gt;
      $ {listedValues}
    & lt; / h2 & gt;
  `
}); 

Recarregue o aplicativo Magic Numbers, abra as ferramentas do desenvolvedor e veja o painel de rede novamente. Para este aplicativo específico, nosso tamanho de pacote foi reduzido por uma escala de quatro com pouco trabalho. Mas ainda há muito espaço para melhorias.

Código Javascript Splitting.

Webpack é um dos mais populares Bundlers do módulo JavaScript usado pelos desenvolvedores da Web hoje. Ele 'pacotes' (combina) todos os seus módulos JavaScript e outros ativos em arquivos estáticos navegadores da Web podem ler.

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

• Um é responsável pelo código que compõe a rota inicial.
• Outro contém nosso código de classificação.

Usando importações dinâmicas (com o importar() Palavras-chave), um segundo script pode ser carregado com preguiça sob demanda. Em nosso aplicativo de números mágicos, o código que compõe o script pode ser carregado conforme necessário quando o usuário clica no botão. Começamos removendo a importação de nível superior para o método de classificação em src / index.js. :

 Import Sortby de "Lodash.sortby"; 

Importe-o no ouvinte do evento que dispara quando o botão é clicado:

form.addeventlistener ("Enviar", E = & GT; {
  e.preventdefault ();
  Importar ('Lodash.sortby')
    .then (módulo = & gt; module.default)
    .then (sortinput ())
    .catch (err = & gt; {alerta (err)});
});

Esta dinâmica importar() O recurso que estamos usando é parte de uma proposta de padrões para incluir a capacidade de importar dinamicamente um módulo no padrão de idioma do JavaScript. Webpack já suporta esta sintaxe. Você pode ler mais sobre como as importações dinâmicas funcionam neste artigo .

O importar() declaração retorna uma promessa quando resolve. A WebPack considera isso como um ponto de divisão que ele irá sair em um script separado (ou pedaço). Uma vez que o módulo seja devolvido, o Módulo.Default é usado para referenciar a exportação padrão fornecida por lodash. . A promessa é acorrentada com outra .então() Chamando A. SortInput método para classificar os três valores de entrada. No final da cadeia promessa, .pegar() é chamado para lidar com onde a promessa é rejeitada como resultado de um erro.

Em um aplicativo real de produção, você deve lidar com erros de importação dinâmicos adequadamente. Mensagens de alerta simples (semelhante ao que é usado aqui) são o que são usados ​​e podem não fornecer a melhor experiência do usuário para deixar os usuários saberem que algo deu errado.

Caso veja um erro de forro como "Erro de análise: Importação e exportação só podem aparecer no nível superior", saiba que isso é devido à sintaxe dinâmica de importação ainda não sendo finalizada. Embora a Webpack o suporte, as configurações para ESLINT (uma ferramenta de linging JavaScript) usada pela Glitch não foram atualizadas para incluir esta sintaxe ainda, mas ainda funciona.

A última coisa que precisamos fazer é escrever o SortInput método no final do nosso arquivo. Isso tem que ser uma função retornando uma função que leva no método importado de lodash.sortby. . A função aninhada pode classificar os três valores de entrada e atualizar o DOM:

 const sortinput = () = & gt; {
  retorno (Sortby) = & gt; {
    Valores consts = [
      input1.valuasnumber,
      input2.valuasnumber,
      input3.valueasnumber.
    ];
    const sortedValues ​​= Sortby (valores);
    resultados.innerhtml = `.
      & lt; h2 & gt;
        $ {listedValues}
      & lt; / h2 & gt;
    `
  };
} 

Monitore os números

Agora vamos recarregar o aplicativo uma última vez e fique de olho no painel de rede. Você deve perceber como apenas um pequeno pacote inicial é baixado quando o aplicativo é carregado. Depois que o botão é clicado para classificar os números de entrada, o script / pedaço contendo o código de classificação é buscado e executado. Você vê como os números ainda são classificados como esperamos que eles?

Código JavaScript Divisão e Lazy-Loading podem ser muito úteis para aparar o tamanho inicial do seu aplicativo ou site. Isso pode resultar diretamente em tempos de carga de página mais rápidos para os usuários. Embora tenhamos olhado para adicionar código dividindo a um aplicativo JavaScript, você também pode aplicá-lo a aplicativos construídos com bibliotecas ou estruturas.

Carregamento preguiçoso com uma biblioteca ou estrutura JavaScript

Um monte de estruturas populares suportam a adição de código de divisão e carregamento preguiçoso usando importações dinâmicas e webpack.

Veja como você pode preguir - carregar um componente do filme 'Descrição' usando reagir (com Reagir.lazy () e seu recurso de suspense) para fornecer um "carregamento ..." fallback enquanto o componente está sendo carregado preguiçoso (veja aqui Para mais detalhes):

 Importação reagir, {Suspense} de 'reagir';
const Descrição = reagir.Lazy (() = & gt; import ('./ description'));
aplicativo de função () {
  Retorna (
    & lt; div & gt;
      & lt; h1 & gt; meu filme & lt; / h1 & gt;
      & lt; suspense fallback = "Carregando ..." & gt;
        & lt; descrição / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

O código de divisão pode ajudar a reduzir o impacto do JavaScript na sua experiência do usuário. Definitivamente, considere se você tem pacotes de javascript maiores e, quando em dúvida, não se esqueça de medir, otimizar e monitorar.

Este artigo foi originalmente publicado em questão 317 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 317 aqui ou Inscreva-se aqui .

Artigos relacionados:

• 9 dos melhores frameworks de JavaScript
• 15 ferramentas essenciais de javascript que você deve usar
• 14 das melhores apis javascript