Back

Usando es-toolkit para Utilitários JavaScript do Dia a Dia

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.

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 delay com suporte a AbortController.
  • 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.

OpenReplay