Get best of the week

Parar de importar pacotes JavaScript inteiros

Com que frequência você importou um pacote JavaScript inteiro para um projeto quando só precisava usar muito poucos recursos deste pacote? Você provavelmente poderá recordar muitos desses casos.

Um exemplo vívido de um pacote importado inteiramente, exigindo apenas algumas de suas funções, pode ser chamado de biblioteca Lodash . Se você não ouviu falar sobre esta biblioteca, verifique a documentação. Em particular, no site do projeto, você pode descobrir que o Lodash simplifica o desenvolvimento do JavaScript, assumindo a tarefa de trabalhar com matrizes, números, objetos e similares.



A biblioteca Lodash inclui mais de 200 funções. Isso sugere que ela é realmente capaz de ajudar o programador a resolver muitos problemas. Mas pode acontecer que, ao importar a biblioteca inteira, apenas 4-5 funções sejam chamadas. Isso nos leva à questão da conveniência de importar o pacote inteiro em uma situação em que apenas 2-3% de seus recursos serão usados. Vamos pensar em como lidar com isso.

Função get Lodash


Um dos meus recursos favoritos da biblioteca Lodash é o recurso get. Ele permite que você organize o acesso seguro a objetos aninhados e suporta o uso de valores padrão.

Aqui está um exemplo de uso desta função:

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

O uso desta função permite tornar o código muito mais limpo do que antes. Isso ajuda a evitar erros devido ao fato de que quando uma matriz vazia é esperada, a função não retornará null. Graças a esta função, você não pode, por engano, chamar um método mapem uma matriz vazia. Protege de outros problemas.

Vamos ver como a inclusão da biblioteca Lodash no projeto, se for planejado usar apenas a função, afetará o tamanho do pacote get. Os experimentos serão conduzidos usando um projeto React. O tamanho do pacote configurável será analisado antes de importar a biblioteca e após várias opções para conectá-lo ao projeto.

Tamanho do projeto antes de importar a biblioteca


Analisamos o tamanho dos arquivos do projeto antes de importar a biblioteca.


Tamanho do arquivo antes de usar o Lodash

Agora, vamos ver as consequências de várias maneiras de importar uma biblioteca para um projeto.

Tamanho do projeto após o uso de diferentes métodos de importação de biblioteca


▍1 Importação tradicional


Trata-se de importar a biblioteca de uma das seguintes maneiras tradicionais.

O primeiro:

import _ from ‘lodash’;

Segundo:

const _ = require('lodash');

Veja como isso afetará o tamanho final dos arquivos do projeto.


Redimensionando arquivos de projeto ao importar um pacote inteiro

§ 2 Importação ES6


Aqui, novamente, temos duas opções.

O primeiro:

import { get } from 'lodash';

Segundo:

const { get } = require('lodash');

Vamos dar uma olhada no efeito dessas importações no tamanho dos arquivos do projeto.


Tamanhos de arquivo ao importar a função get usando atribuição destrutiva

Como você pode ver, o uso das duas abordagens acima levou a um aumento no tamanho do arquivo em cerca de 23 Kb. E este é um aumento muito significativo, especialmente considerando que estamos falando sobre o uso de uma única função da biblioteca, que inclui mais de 200 funções. Como resultado, verifica-se que o tamanho do pacote aumentou tanto quanto se esperaria que aumentasse se todas essas 200 funções fossem usadas no projeto.

Talvez 23 Kb não seja um preço tão alto para usar a única função necessária? Não, é demais. 

Existe alguma maneira de importar apenas o que você precisa em um projeto? Sim, existe esse caminho.

Vamos analisar a pasta em que os materiais Lodash estão armazenados.

Para fazer isso, basta seguir o caminho node_modules/lodash. Nesta pasta, você pode encontrar muitos arquivos nos quais o código de funções individuais está armazenado. Entre eles, é fácil encontrar o arquivo get.jsem que está localizado o código da função em que estamos interessados get. E isso significa que, se precisarmos apenas de uma função, getbasta importar apenas esse arquivo para o projeto. Isso nos leva ao terceiro método de importação.

▍3 Importar arquivo get.js do Lodash


Aqui, novamente, dois métodos estão disponíveis.

O primeiro:

import get from 'lodash/get';

Segundo:

const get = require('lodash/get');

Dê uma olhada no redimensionamento do pacote.


Tamanhos de arquivo ao importar o arquivo get.js

Pode-se observar que, devido ao fato de termos importado apenas o arquivo para o projetoget.js, conseguimos livrar-nos de mais de 20 Kb de código desnecessário que entra no pacote quando se utiliza outros métodos. Mas estamos falando de apenas um pacote. Um projeto JavaScript típico tem muito mais dependências. Imagine como uma abordagem cautelosa para importar pacotes e o controle constante dos tamanhos de pacotes podem afetar um projeto de servidor ou cliente.

Todos os pacotes suportam uma abordagem de importação seletiva?


Não, não todos. Depende completamente da organização dos arquivos do pacote. Felizmente, porém, a maioria dos pacotes populares razoavelmente grandes é estruturada para que, trabalhando com eles, seja fácil organizar a importação seletiva de seus recursos individuais.

Como fazer o mesmo enquanto trabalha com outras bibliotecas?


O processo de remoção de código não utilizado é conhecido como tremor de árvore. Se você precisar, por exemplo, “sacudir a árvore” da biblioteca Ant Design - pesquise na Internet as palavras “formigueiro sacudido”. Você pode encontrar uma discussão sobre esse assunto no StackOverflow ou no GitHub. Tendo encontrado essa discussão - veja através dela - é bem possível que alguém já tenha resolvido a tarefa antes de você.

Outra maneira de se livrar de códigos desnecessários requer um pouco mais de esforço. Você precisa ir para a pasta do pacote localizada em node_modulese fazer uma análise de código. Em particular, você deve estar interessado na estrutura do projeto e descobrir se ele está dividido em pequenos módulos que podem ser importados para o projeto independentemente um do outro.

Exemplo de otimização de importação usando o pacote antd


Antes:

import { Menu} from 'antd';

Depois de:

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

Exemplo de otimização de importação usando o pacote material-ui


Antes:

import { Button } from '@material-ui/core';

Depois de:

import Button from '@material-ui/core/Button';

Exemplo de otimização de importação usando o pacote moment


A otimização do momento de importação da biblioteca parece um pouco mais complicada. Portanto, se você precisar, dê uma olhada na tarefa que eu criei no rastreador de tarefas desta biblioteca.

Sumário


Você mesmo pode garantir que muitos códigos desnecessários sejam inseridos em seus projetos. Você pode resolver esse problema comparando cuidadosamente o que importa e o que usa. Isso permitirá, por exemplo, reduzir o tempo de carregamento dos seus sites. Portanto, é recomendável monitorar cuidadosamente o tamanho dos pacotes configuráveis ​​do projeto e otimizar as importações de dependência.

E como você, em seus projetos JavaScript, luta para importar código desnecessário?

More articles:


All Articles