Gerson Groth

Lodash é uma biblioteca utilitária JavaScript que fornece diversas funções para tarefas típicas de programação. Se você a utiliza, há grandes chances de estar usando/importando ela da forma errada.

Lodash

Apesar de diversas funções disponibilizadas pela lodash já estarem disponíveis nativamente no JavaScript, como `forEach`, `map` e `reduce`, ainda existem diversas funções que utilizo com certa frequência, como `cloneDeep`.

O que eu não sabia até pouco tempo atrás é que sempre utilizei ela da forma errada. Nesse contexto, quero dizer que a forma como eu utilizava a biblioteca acabava importando mais coisas do que a simples função que queria usar.

Contexto

Precisei analisar o bundle que estávamos disponibilizando para o cliente, ou seja, o tamanho do(s) arquivo(s) JS que o cliente precisa carregar ao acessar a página web. Para essa análise, uma das ferramentas que utilizei foi a extensão Import Cost para o Visual Studio Code.

Ao investigar o motivo do bundle estar incluindo toda a biblioteca lodash, ao invés de apenas as funções que utilizávamos, descobri que

importava exatamente o mesmo conteúdo que

Ou seja, eu estava querendo importar uma única função, e estava levando toda a biblioteca para o cliente.

Solução

Para resolver esse problema, foi necessário apenas importar a função da seguinte forma

Dessa forma, o bundle foi de 24.6K gzipped para 384B gzipped.

Alternativas

Primeiramente, uma discussão plausível é se devemos ou não usar lodash, já que muitos dos utilitários já existem de forma nativa nos browsers. Não entrarei nesse mérito nesse post. No entanto, outras libs podem causar o mesmo efeito colateral.

É possível utilizar eslint-plugin-lodash para garantir que o import seja realizado corretamente, gerando um warning ou error. 

No entanto, existem soluções que já fazem esse trabalho durante compilação, sem a necessidade de se preocupar caso alguém faça import do jeito incorreto.

Uma solução para esse problema do lodash é o uso do plugin babel-plugin-lodash (depreciado em 16/09/2023). Para quem usa Nextjs, é possível solucionar esse problema (e de outras libs como date-fns), utilizando optimizePackageImports.

Conclusão

Por mais simples que a solução possa ser, ela proporciona reduzir o bundle em vários KB (dependendo de quantas funções lodash você usar), evita que o usuário baixe dados desnecessários, e melhora o desempenho da página, uma vez que haverá menos javascript a ser parseado.

Foto de capa por Tasha Lyn disponível em Unsplash.