Usando es-toolkit para Utilitários JavaScript do Dia a Dia
Se você já recorreu ao Lodash para fazer debounce de um input, dividir um array em chunks ou selecionar chaves de um objeto, já conhece o valor de uma biblioteca de utilitários JavaScript bem projetada. A pergunta que vale a pena fazer hoje é se o Lodash ainda é a escolha padrão certa, ou se uma opção mais enxuta se encaixa melhor em projetos modernos baseados em TypeScript e ESM.
O es-toolkit é uma biblioteca de utilitários JavaScript ativamente mantida, construída do zero com TypeScript, ESM e APIs JavaScript modernas em mente. Ela cobre as funções auxiliares que desenvolvedores frontend mais utilizam — e faz isso com uma pegada notavelmente menor que o Lodash.
Principais Conclusões
- O es-toolkit é uma biblioteca de utilitários moderna e TypeScript-first que vem com suas próprias definições de tipos e suporta tree-shaking limpo desde o início.
- Está pronto para produção, com adoção por Storybook, Recharts e CKEditor, além de uma recomendação oficial do Nuxt.
- O tamanho do bundle pode ser significativamente menor que o do Lodash, tornando-o adequado para JavaScript do lado do cliente, onde o tempo de carregamento importa.
- Uma camada de compatibilidade (
es-toolkit/compat) facilita a migração a partir do Lodash, embora o pacote padrão seja a melhor escolha de longo prazo.
O que é o es-toolkit e por que ele importa?
O es-toolkit é uma biblioteca moderna de utilitários JavaScript que fornece implementações tipadas e tree-shakeable de funções auxiliares comuns. É escrito inteiramente em TypeScript, vem com suas próprias definições de tipos e não requer um pacote @types/ separado.
Como observado na documentação do es-toolkit, a biblioteca já é utilizada por projetos e ecossistemas como Storybook, Recharts, CKEditor, Material UI e Nuxt. Esse nível de adoção é um bom indicador de que o projeto é ativamente mantido e adequado para uso em produção.
A biblioteca está organizada em categorias claras — utilitários de array, objeto, função, string, matemática e assíncronos — cada uma em seu próprio módulo. Essa estrutura torna o tree-shaking simples com qualquer bundler moderno.
Funções Auxiliares do Dia a Dia, Cobertas
Aqui está uma visão prática dos tipos de utilitários que o es-toolkit lida bem:
Utilitários de Array
import { chunk, groupBy, uniq, difference } from 'es-toolkit';
chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]
groupBy(['one', 'two', 'three'], (s) => s.length); // { 3: ['one', 'two'], 5: ['three'] }
uniq([1, 2, 2, 3]); // [1, 2, 3]
difference([1, 2, 3], [2, 3]); // [1]
Utilitários de Objeto
import { pick, omit, mapValues } from 'es-toolkit';
pick({ a: 1, b: 2, c: 3 }, ['a', 'c']); // { a: 1, c: 3 }
omit({ a: 1, b: 2, c: 3 }, ['b']); // { a: 1, c: 3 }
mapValues({ a: 1, b: 2 }, (v) => v * 2); // { a: 2, b: 4 }
Utilitários de Função
import { debounce, throttle, once } from 'es-toolkit';
const handleSearch = debounce((query: string) => fetchResults(query), 300);
const handleScroll = throttle(() => updatePosition(), 100);
const initialize = once(() => setupApp());
Verificação de Null e Type Guards
import { isNotNil } from 'es-toolkit';
const values = [1, null, 2, undefined, 3];
values.filter(isNotNil); // [1, 2, 3] — typed as number[]
O TypeScript infere o tipo restringido corretamente aqui — algo que exige mais esforço manual com Lodash e @types/lodash.
Tamanho do Bundle: Uma Diferença Prática
Quando você importa uma única função do es-toolkit em um projeto Vite, apenas o código dessa função é incluído no bundle. Dependendo do utilitário, o tamanho adicionado ao bundle pode ser extremamente pequeno em comparação com importações equivalentes do Lodash.
A diferença é mais visível quando você importa do pacote lodash completo sem tree-shaking, o que pode adicionar mais de 20 kB compactados.
A diferença importa mais para JavaScript do lado do cliente, onde o tamanho do bundle afeta diretamente o tempo de carregamento e os Core Web Vitals.
Discover how at OpenReplay.com.
Migrando do Lodash
Se você está migrando uma base de código existente, o es-toolkit oferece uma camada de compatibilidade:
// Before
import _ from 'lodash';
// After (compatibility mode)
import _ from 'es-toolkit/compat';
O es-toolkit/compat é testado contra a própria suíte de testes do Lodash e busca compatibilidade total com ele. Dito isso, o pacote padrão es-toolkit é a melhor escolha de longo prazo — é menor, mais rápido e os tipos TypeScript são mais precisos.
O pacote padrão também tem uma superfície de API menor e mais moderna que o Lodash, então revisar a documentação oficial antes de grandes migrações ainda é uma boa ideia.
Quando o es-toolkit Faz Sentido
Use o es-toolkit quando:
- Você está começando um novo projeto TypeScript ou ESM e quer utilitários tipados sem uma dependência pesada.
- O tamanho do bundle é uma preocupação e você quer tree-shaking limpo.
- Você precisa de helpers assíncronos modernos como
delaycom suporte aAbortController. - Você quer tipos embutidos sem instalar um pacote
@types/separado.
Continue com o Lodash (ou JavaScript nativo) quando:
- Você tem uma grande base de código existente em Lodash e o custo de migração supera o benefício.
- Você depende de padrões específicos do Lodash em uma aplicação mais antiga.
- Seu ambiente de execução é anterior ao ferramental moderno do JavaScript.
Conclusão
O es-toolkit é uma alternativa ao Lodash prática e bem mantida para projetos JavaScript e TypeScript modernos. Ele não substituirá imediatamente todos os fluxos de trabalho com Lodash, mas para novos projetos — ou qualquer base de código onde o tamanho do bundle e a segurança de tipos importam — vale a pena considerá-lo como biblioteca de utilitários padrão.
Perguntas Frequentes
Não totalmente. O pacote padrão do es-toolkit tem tipos mais precisos e uma superfície menor que o Lodash, portanto algumas assinaturas de funções diferem. Para uma migração mais fácil, o módulo es-toolkit/compat espelha a API do Lodash e é testado contra a própria suíte de testes do Lodash. A maioria dos projetos pode migrar gradualmente, começando com o compat e mudando para o pacote padrão ao longo do tempo.
Funciona em ambos. O es-toolkit roda em ambientes modernos de Node.js, navegadores, Deno e Bun, e se integra de forma limpa com bundlers de frontend como Vite, webpack e Rollup.
Frequentemente, sim — especialmente se seu uso atual do Lodash importa do pacote raiz. O es-toolkit foi projetado para tree-shaking moderno e muitos utilitários adicionam muito pouco a um bundle de produção. As diferenças exatas no tamanho do bundle dependem das funções que você importa e de como sua aplicação é empacotada.
Não. O es-toolkit é escrito em TypeScript e vem com suas próprias definições de tipos, então não há necessidade de instalar um pacote @types/ separado. A inferência de tipos também tende a ser mais precisa do que o Lodash com @types/lodash, particularmente para type guards como isNotNil e helpers genéricos como pick e omit.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.