As a software engineer, I’m always on the lookout for tools and libraries that can enhance my development workflow and optimize performance. One such tool is Lodash, a popular JavaScript utility library that makes working with arrays, objects, and other data structures a breeze. However, there’s an important decision to make when incorporating Lodash into a project: should you use the standard lodash package or opt for lodash-es? In this post, I’ll share my insights on why lodash-es might be the better choice for modern JavaScript development, especially when using TypeScript.
Thank me by sharing on Twitter 🙏
Introduction
Lodash has been a staple in the JavaScript community for years, offering a wide range of utility functions that simplify common programming tasks. However, as JavaScript has evolved, so too have the tools and practices we use. With the advent of ES modules (ESM) and advanced bundling techniques like tree shaking, the way we import and use libraries has changed significantly. This is where lodash-es comes into play.
Understanding the Differences
1. ES Module Support
lodash-es: This version of Lodash is designed to work with ES modules (ESM). It uses the nativeimportandexportsyntax, making it a better fit for modern JavaScript environments that support ES modules.lodash: The standard version of Lodash uses CommonJS module syntax, which is typical for Node.js environments but less optimal for modern front-end builds.
2. Tree Shaking
lodash-es: Supports tree shaking out of the box. Tree shaking is a technique used by modern JavaScript bundlers (like Webpack or Rollup) to eliminate unused code from the final bundle. By usinglodash-es, you can ensure that only the parts of Lodash you actually use are included in your build, potentially reducing your bundle size.lodash: While you can achieve some level of tree shaking withlodashby using tools likebabel-plugin-lodash, it requires additional configuration and might not be as effective as usinglodash-es.
3. Compatibility and Performance
lodash-es: Might be slightly better in performance for client-side applications due to the optimized module loading and tree shaking capabilities. It aligns better with modern JavaScript practices and tools.lodash: Is more commonly used in server-side environments where the benefits of tree shaking and ES module syntax are less impactful.
4. Tooling and Ecosystem
lodash-es: Works seamlessly with modern build tools that support ES modules, like Rollup and newer versions of Webpack.lodash: Has broader compatibility with older build systems and tools that expect CommonJS modules.
Practical Example: Migrating from lodash to lodash-es
Let’s walk through a practical example of migrating a project from lodash to lodash-es. Suppose we have a project that uses several Lodash functions.
Original Code with lodash
Here’s a sample code snippet using lodash:
const _ = require('lodash');
const array = [1, 2, 3, 4, 5];
const evens = _.filter(array, (num) => num % 2 === 0);
const doubled = _.map(evens, (num) => num * 2);
console.log(doubled); // Output: [4, 8]Migrated Code with lodash-es
First install with Typescript types:
Unprepared Healer: A Fantasy LitRPG Isekai Adventure (Earthen Contenders Book 2)
$4.99 (as of November 24, 2024 15:55 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Anker 332 USB-C Hub (5-in-1) with 4K HDMI Display, 5Gbps - and 2 5Gbps USB-A Data Ports and for MacBook Pro, MacBook Air, Dell XPS, Lenovo Thinkpad, HP Laptops and More
$18.84 (as of November 23, 2024 06:27 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
SZHAIYIJIN SD Card Reader for iPhone, Memory Card Reader with USB Camera Adapter Plug and Play Trail Game Camera SD Card Viewer Supports SD and TF Card Micro SD Card Adapter for iPad No App Required
$8.49 (as of November 23, 2024 06:27 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)npm install lodash-es
npm install --save-dev @types/lodash-esTo migrate this code to use lodash-es, we’ll update the imports to use ES modules:
import { filter, map } from 'lodash-es';
const array = [1, 2, 3, 4, 5];
const evens = filter(array, (num) => num % 2 === 0);
const doubled = map(evens, (num) => num * 2);
console.log(doubled); // Output: [4, 8]By making this change, we enable tree shaking, ensuring that only the filter and map functions are included in the final bundle. This reduces the bundle size and improves performance.
Conclusion
In modern JavaScript development, optimizing performance and efficiency is crucial. By choosing lodash-es over lodash, we can leverage ES modules and tree shaking to create leaner, faster applications. The seamless integration with modern build tools and alignment with current best practices make lodash-es the superior choice for many projects.
Switching to lodash-es is a straightforward process that can yield significant benefits in terms of bundle size and performance. As JavaScript continues to evolve, staying up-to-date with these optimizations helps ensure that our code remains efficient and maintainable.
