Como importar dinamicamente JavaScript com mapas de importação
A importação dinâmica nas páginas da web é feita através de um recurso chamado Mapas de importação. Você vai aprender sobre carga dinâmica, comportamento da ferramenta de construção padrão e o uso de mapas de importação com um exemplo passo a passo. Vamos começar.
Comportamento da ferramenta de construção padrão
Por padrão, quando você executa uma página da web html e todos os scripts incluídos dentro dele são compilados dentro de um grande arquivo. Todas as bibliotecas externas e internas são carregadas instantaneamente na memória (servidor) e muita complexidade é adicionada ao projeto devido ao carregamento de vários trechos de código externos ao mesmo tempo.
Anteriormente, os aplicativos JavaScript eram muito simples e básicos, mas com o passar do tempo, os aplicativos estão se tornando cada vez mais desafiadores e complexos, e é exatamente por isso que carregar todas as bibliotecas externas ao mesmo tempo mesmo antes de serem necessárias não é uma solução eficiente. É aí que o carregamento dinâmico e a modularidade dos scripts são úteis.
Carga dinâmica
Como o nome indica, é o processo de carregar bibliotecas e scripts externos somente quando necessários, que está no tempo de execução. No que diz respeito ao script do aplicativo da web, o carregamento dinâmico de scripts é feito por um recurso no ES6 chamado módulos em que os scripts são divididos em componentes menores. Da mesma forma, a importação também é feita no tempo de execução usando mapas de importação.
Para carregar as importações no tempo de execução, usamos um recurso chamado Mapas de importação, Esse recurso nos permite substituir o procedimento padrão das ferramentas de construção e carga preguiçosa nossas importações/bibliotecas; O carregamento preguiçoso significa carregar apenas quando for necessário.
Para demonstrar a importação dinâmica de scripts externos em uma página da web, você configurará uma página da Web que executa uma tarefa simples, depois vamos importar uma biblioteca/pacote externo e usar sua função para executar a mesma tarefa
Observação: Você precisa de um editor de código (de preferência vs código) para este e nodejs,
Etapa 1: Configurando um HTML e um arquivo de script
Para demonstrar o uso de mapas de importação para carregamento dinâmico, exigiremos que o NodeJS seja instalado em nosso sistema, clique aqui para ler a instalação do NodeJS.
Crie uma pasta em sua máquina e abra a pasta com o código VS (ou o editor de código desejado) como mostrado abaixo:
Dentro da pasta, crie um arquivo html nomeado lar.html e um arquivo de script como roteiro.JS:
Vamos exibir algumas palavras usando o arquivo de script. Então, no arquivo html, adicione a seguinte tag de script.
Observação: estamos usando o Propriedade do tipo e defini -lo igual a módulo para notificar o navegador de que este é um script modular.
Agora, dentro do arquivo de script, digite as seguintes linhas de código para imprimir texto na página da web html.
const el = documento.createElement ('P');const words = "Linux, dica, tutorial!";
const texto = documento.CreateTextNode (palavras);
El.appendChild (texto);
documento.corpo.ApndendChild (EL);
Para executar o arquivo, abra o terminal do código VS e digite “npx servir”, Se for a sua primeira vez tentando o comando npx servir, ele poderá instalar o“servir”Pacote e peça afirmação e, em seguida, iniciará a instalação:
Depois disso, o comando npx servirá onde está hospedando nossa página da web html, então clique no link da seguinte forma:
Quando você abre o link http: // localhost: 3000, você veria a seguinte saída:
Etapa 2: Importando biblioteca externa
Nós vamos importar StartCase Método do Lodash biblioteca e use esse método de início para converter nossas seqüências para "iniciar o caso" usando o seguinte código:
importar startcase de '@lodash/startcase';Observação: Inicie o tipo de caso significa que cada palavra terá a primeira letra em um caso de capital.
Você vai modificar o arquivo de script como:
importar startcase de "@lodash/startcase";const el = documento.createElement ("P");
const Todisplay = "Linux, dica, tutorial!";
const texto = documento.CreateTextNode (StartCase (Todisplay));
El.appendChild (texto);
documento.corpo.ApndendChild (EL);
Como você pode ver, o código é um pouco diferente, estamos passando pelo Mostrar variável para o StartCase função.
Atualize a página e você verá o seguinte erro em seu console de desenvolvedor:
Isso ocorre porque o navegador não sabe o que fazer com esta declaração de importação no início do script
arquivo. O navegador está tentando encontrar o Lodash Pacote no servidor da web local, esse também é o comportamento padrão da ferramenta de construção. Para alterar isso, usamos mapas de importação em arquivos HTML.
Etapa 3: Usando mapas de importação
Importar mapa, é um recurso ES6, ele contém um par de valores-chave, com a chave sendo o nome da importação e o valor sendo a localização da importação.
A sintaxe do mapa de importação é:
Para o nosso caso, adicionamos a seguinte etiqueta de script, incluindo o mapa de importação:
Observação: A tag de script que contém o mapa de importação deve ser adicionada antes da tag de script que contém o tipo modular.
Depois de adicionar essas linhas, atualize sua página da web e você verá a saída:
Como você pode ver, o StartCase Método converteu com sucesso nossas palavras de string para "Iniciar o caso" do tipo. Agora você está incluindo bibliotecas externas dinamicamente e podemos examinar o carregamento preguiçoso nas ferramentas do desenvolvedor do navegador.
Etapa 4: Examine o carregamento preguiçoso
Abra o console do desenvolvedor do navegador e vá até a guia de rede.
Sob a cachoeira, você pode ver qual script estava carregando a que horas:
E daqui você pode ver claramente que todos os scripts não foram carregados no início, eles foram carregados preguiçosamente significado no tempo de execução.
Conclusão
Em JavaScript, a importação dinâmica é feita por um recurso chamado Mapas de importação. Importação dinâmica significa substituir o comportamento padrão das ferramentas de construção e importar bibliotecas externas quando elas são necessárias no tempo de execução, porque às vezes você precisa de uma biblioteca em apenas uma parte do seu aplicativo da web e não os outros. As ferramentas de construção padrão carregarão todas as bibliotecas em um grande arquivo que causará um aumento no consumo de memória. Você aprendeu a usar os mapas de importação para carregar bibliotecas externas de carga preguiçosa com um exemplo e examinou -o no console do desenvolvedor.