How to Import Lodash: Tutorial

Lodash is a popular utility library that simplifies common JavaScript tasks like manipulating arrays, objects, and functions. While it’s widely used in React projects, how you import Lodash can significantly impact your app’s bundle size.

This article explores three import methods and compares their impact using a sample React app. It also covers optimization techniques with lodash-es and build plugins.

What is Lodash?

Lodash is a utility library for JavaScript that provides a wide range of functions to simplify tasks like working with arrays, objects, and strings. It helps developers write cleaner, more readable, and efficient code by offering solutions to common programming challenges.

For example, Lodash can help manipulate data lists, filter items, or deep clone objects. Its utility functions simplify tasks like sorting, mapping, and checking for deep equality, especially in projects with complex data handling.

Why Use Lodash?

Lodash offers several advantages that can significantly simplify and improve the quality of JavaScript code:

• Ready-made functions for common tasks: Lodash provides built-in methods for working with arrays, objects, and strings. Instead of writing custom logic, developers can use functions like _.map() to transform each item in an array. This reduces errors and keeps the code focused on core logic instead of low-level details.
• Cleaner and shorter code: Many Lodash functions replace multiple lines of JavaScript with a single, readable call. For example, filtering out even numbers from a list usually requires a loop and conditionals, but with _.filter(), the same task becomes a one-liner. This makes the code easier to understand at a glance and faster to write.
• Consistent across browsers: Different browsers can handle edge cases in JavaScript differently. Lodash normalizes behavior so that functions like _.isEqual() return the same results regardless of environment. This reliability is invaluable when building applications that must work the same across all modern browsers.

• Optimized performance: Lodash functions are designed to perform well, especially with large datasets. For example, _.sortBy() can sort thousands of items more efficiently than custom sorting logic in plain JavaScript. This matters when working with data-heavy interfaces like tables, reports, or charts.
• Easy to read and maintain: Lodash function names are descriptive and backed by clear documentation, which helps teams write maintainable code. For instance, _.cloneDeep() handles deeply nested objects without side effects, something that’s hard to do correctly with plain JavaScript.

3 Ways to Import Functions From Lodash

Lodash functions can be imported in different ways depending on the project’s needs. Each method offers a balance between ease of use and bundle size optimization. Choosing the right approach depends on how many Lodash functions are required and how important bundle size is for the final build.

Below are three commonly used import methods.

1. Import the Whole Lodash Library

This method imports the entire Lodash library, giving access to all available functions through the _ namespace. It is the most convenient option, especially when many Lodash utilities are needed. However, it also includes all functions in the bundle, which can lead to a larger build size even if only a few are used.

// Import the whole Lodash library

import _ from 'lodash';



// Example usage: Using _.map() to transform an array

const numbers = [1, 2, 3];

const doubled = _.map(numbers, num => num * 2);

console.log(doubled); // Output: [2, 4, 6]

In this example, the _.map() function takes each number from the numbers array and multiplies it by 2, producing a new array [2, 4, 6].

2. Import Specific Methods Inside Curly Brackets

This method allows importing only the functions that are needed by specifying them in curly brackets. It helps reduce bundle size by avoiding including unused Lodash functions while keeping the syntax relatively clean.

// Import specific Lodash methods inside curly brackets

import { map } from 'lodash';



// Example usage: Using map() to double values in an array

const numbers = [1, 2, 3];

const doubled = map(numbers, num => num * 2);

console.log(doubled); // Output: [2, 4, 6]

This code performs the same transformation as the previous example, doubling each number array value. However, unlike importing the entire Lodash library, this method imports only the map function. This helps reduce bundle size by including just what’s needed and nothing more, making the code more efficient for production builds.

3. Import Specific Methods Individually

Lodash functions can be imported directly from their individual module paths to minimize bundle size. This method includes only the selected function and avoids loading unused library parts.

// Import a single Lodash function directly

import map from 'lodash/map';



// Example usage: Using map() to transform an array

const numbers = [1, 2, 3];

const doubled = map(numbers, num => num * 2);

console.log(doubled); // Output: [2, 4, 6]

Here, the map() function is imported from its specific file path. The logic remains the same, each number in the array is multiplied by 2, but this import method ensures that only the map function is included in the final bundle.

Compare Lodash Import Methods by Bundle Size

When evaluating different ways to import Lodash in a project, it’s essential to consider how each method affects the bundle size. A simple React app can be a good example for testing various import strategies. This benchmark uses four Lodash functions: uniq, tail, times, and a random number generator.

Step 1: Create a React App

Start by creating a new React application using the create-react-app CLI. To inspect the bundle, install source-map-explorer, a tool that analyzes the final JavaScript bundle and visualizes how much space each module takes up. This makes it easier to identify which Lodash import patterns result in bloated builds.

Step 2: Checking All Three Import Options

To effectively compare the different import methods, the following four Lodash functions are selected for demonstration: uniq, tail, times, and a random number generator.

_.uniq()

Removes duplicate values from an array.

_.tail()

Returns all elements of an array except the first one.

_.times()

Creates an array of repeated values, generated by a function, a specified number of times.

These functions are used with a simple array to simulate typical Lodash usage:

const numbers = [1, 5, 8, 10, 1, 5, 15, 42, 5];



// Remove duplicates using _.uniq

const uniqNumbers = _.uniq(numbers); 

// Result: [1, 5, 8, 10, 15, 42]



// Get all elements except the first using _.tail

const tailNumbers = _.tail(numbers); 

// Result: [5, 8, 10, 1, 5, 15, 42, 5]



// Generate random numbers using _.times

const getRandomNumber = () => Math.round(Math.random() * 100);

const randomNumbers = _.times(8, getRandomNumber); 

// Result: [58, 9, 98, 54, 96, 24, 25, 74]

Step 3: Compare Bundle Sizes

Before adding Lodash, it’s important to establish a baseline. A fresh React app with no extra dependencies typically produces a bundle of around 100–120 KB, depending on the environment. This clean build is the reference point for measuring how each Lodash import style impacts the final size.

1. Import the Entire Lodash Package

import _ from 'lodash';

This code pulls in the entire Lodash library, making all utility functions available under the _ namespace. While convenient, it adds roughly 70–80 KB to the bundle, even if only a few functions are used. This is because the entire package (including unused code) is bundled by default. Final bundle size: ~180–200 KB

2. Curly Brackets Import (Specific Functions)

import { map, uniq, tail, times } from 'lodash';

This method appears more selective, but under the hood, it still brings in the core Lodash package. Tree-shaking is often ineffective here, so most of Lodash’s code still ends up in the final bundle. As a result, the bundle size remains nearly identical to the full import. Final bundle size: ~180–200 KB

3. Module-Specific Import (Individual Functions)

import map from 'lodash/map';

import tail from 'lodash/tail';

import times from 'lodash/times';

import uniq from 'lodash/uniq';

This is the most efficient method. By importing each function directly from its module path, only the used code is included in the bundle. This leads to a significantly smaller bundle size, usually around 140–150 KB. It’s the best choice when minimizing bundle size is a priority.

Below is a simplified stacked bar chart that shows how each Lodash import method affects the final bundle size. While tools like source-map-explorer or webpack-bundle-analyzer offer interactive insights, this visual gives a quick comparison without needing to run extra tools.

• Full Lodash Import: The bundle consists of a larger portion of Lodash and React, with the “Other Code” comprising the remaining size.
• Curly Bracket Import: Despite importing specific functions, the size of Lodash and React remains roughly the same as the full import.
• Module-Specific Import: The smallest bundle size, with only the necessary Lodash modules included, reducing the size significantly.

How to Import Lodash in Your React Project?

You can optimize how Lodash is imported in a React project to reduce bundle size and improve performance. Here are three common methods: using lodash-es, the Lodash Babel plugin, and the Lodash Webpack plugin.

1. Using Lodash-es

lodash-es is a version of Lodash built with ES module syntax. This allows bundlers like Webpack or Rollup to apply tree shaking and eliminate unused code.

While it aligns well with modern JavaScript tools, the actual impact on bundle size may vary. It often does not reduce size as much as direct per-method imports from the main Lodash package. Some dependencies within lodash-es still get bundled, which limits the benefits of tree shaking.

// Importing the full Lodash library from Lodash-es

import _ from 'lodash-es';



// Example usage: Using _.map() to transform an array

const numbers = [1, 2, 3];

const doubled = _.map(numbers, num => num * 2);

console.log(doubled); // Output: [2, 4, 6]

While lodash-es is designed for tree shaking, it often doesn’t reduce bundle size as much as expected. Even when importing individual functions, internal dependencies still get included in the final bundle. For example:

• Full import: 256.4 KB
• Curly bracket import: 256.54 KB
• Individual module imports: 142.39 KB

Despite using ES modules, the overall size is often larger than the standard Lodash package. If minimizing bundle size is a key goal, importing specific functions directly from Lodash’s main package is usually more effective.

2. Using the Lodash Babel Plugin

The Lodash Babel plugin automatically rewrites Lodash imports during transpilation. It converts full or grouped imports into individual function imports, reducing the final bundle size without requiring changes to how you write imports.

// Importing Lodash using Babel to cherry-pick functions

import _ from 'lodash';



// Example usage: Using _.map() to transform an array

const numbers = [1, 2, 3];

const doubled = _.map(numbers, num => num * 2);

console.log(doubled); // Output: [2, 4, 6]

Behind the scenes, this import is transformed into something like:

import map from 'lodash/map';

This gives you the simplicity of using _throughout your code while still keeping the bundle lean. However, this plugin can slightly increase build times, especially in large codebases. It works best when paired with the Lodash WebPack plugin for further optimization.

3. Using the Lodash WebPack Plugin

The Lodash WebPack plugin analyzes your code during bundling and removes unused parts of Lodash. It works well alongside the Babel plugin to ensure that only the functions you use are included in the final bundle.

// Using the Lodash WebPack plugin

import _ from 'lodash';



// Example usage: Using _.map() to transform an array

const numbers = [1, 2, 3];

const doubled = _.map(numbers, num => num * 2);

console.log(doubled); // Output: [2, 4, 6]

When this plugin is enabled, Webpack strips out unused Lodash utilities and keeps only what’s needed. This leads to one of the smallest possible bundle sizes when using Lodash with grouped imports. It’s especially effective for production builds where load times and performance are essential.

Conclusion

Lodash is a utility library that simplifies tasks like array manipulation, deep cloning, and object comparison. It simplifies common programming tasks like filtering, mapping, deep cloning, and checking for equality. The most effective option is to import functions individually from their module paths, which keeps the bundle lean and improves load performance.

While optimizing imports is crucial for web apps, it becomes even more critical when those apps are tested on real devices. Real device testing on BrowserStack helps catch performance issues caused by large bundles, especially on slower networks or older phones.

Talk to an Expert

Frequently Asked Questions

1. What is Lodash used for?

Lodash is a JavaScript utility library that provides a large set of functions to simplify tasks like working with arrays, objects, strings, and numbers. It handles common programming operations to help make code more concise, readable, and efficient.

2. Is Lodash still relevant?

Yes, Lodash remains widely used and relevant. It offers consistent, well-tested utility functions that work across different JavaScript environments, making development faster and code more reliable.

3. Can Lodash be used in React?

Lodash can be seamlessly integrated into React projects. Its utility functions help manipulate data, manage state, and perform tasks like deep cloning, filtering, and mapping data in React components.

4. How to import Lodash into your React project?

First, install Lodash using npm or yarn (npm install lodash or yarn add lodash). Then, import only the needed functions to keep your bundle size small, for example:

import map from 'lodash/map';