Best Way to Import Lodash in React Applications

Optimizing how Lodash is imported into a React application is critical for minimizing JavaScript bundle sizes and maintaining fast load times. This guide explains the performance pitfalls of naive import patterns and outlines the recommended modern strategies—specifically using lodash-es for tree-shaking or direct path imports—to ensure you only bundle the functions your project actually uses.

The Problem: Full Library Imports

Importing the entire Lodash library is a common mistake that drastically increases bundle size:

// Avoid this: imports the entire ~70KB+ library
import _ from 'lodash';
import { debounce } from 'lodash';

Even though named imports ({ debounce }) look like they should only include the specified function, standard lodash is distributed as CommonJS modules. Most bundlers (like Webpack or Vite) cannot effectively tree-shake CommonJS, causing the entire library to be bundled anyway.

The cleanest and most modern approach is to switch to lodash-es, the official ECMAScript module (ESM) export of Lodash.

1. Install lodash-es:

npm install lodash-es
npm install -D @types/lodash-es # If using TypeScript

2. Import using standard ESM syntax:

import { debounce, cloneDeep } from 'lodash-es';

Because lodash-es uses standard ES modules, modern bundlers (Vite, Rollup, Webpack 5) can analyze the import statements and eliminate unused code (tree-shaking), ensuring only debounce and cloneDeep are added to your final production bundle.

Strategy 2: Direct Method Imports (Universal Fallback)

If your environment does not support ES modules or you must stick with the standard lodash package, import functions directly via their file paths.

1. Install lodash:

npm install lodash
npm install -D @types/lodash # If using TypeScript

2. Import specific methods by path:

import debounce from 'lodash/debounce';
import cloneDeep from 'lodash/cloneDeep';

This bypasses the root index file entirely. The bundler only resolves and bundles the specific files and their direct dependencies, reliably preventing full library inclusion regardless of bundler configuration.

Summary Checklist