How to optimize Lodash's bundle size? What is on-demand import?

Lodash's on-demand import is an important means of optimizing project performance. Here is a detailed answer about Lodash on-demand import:

What is Lodash On-Demand Import?

On-demand import means only importing the methods actually used from Lodash, rather than importing the entire Lodash library. This can significantly reduce bundle size and improve application load speed.

Comparison of Lodash Import Methods

1. Full Import (Not Recommended)

javascript
// Import the entire Lodash library
import _ from 'lodash';

// Use
const result = _.map([1, 2, 3], n => n * 2);

Disadvantages:

• Large bundle size (~70KB gzipped)
• Contains a lot of unused code
• Affects application load speed

2. Import Single Methods On-Demand (Recommended)

javascript
// Only import needed methods
import map from 'lodash/map';
import filter from 'lodash/filter';
import debounce from 'lodash/debounce';

// Use
const result = map([1, 2, 3], n => n * 2);
const filtered = filter([1, 2, 3], n => n > 1);
const debouncedFn = debounce(fn, 300);

Advantages:

• Small bundle size (~1-2KB per method)
• Only contains actually used code
• Improves application load speed

3. Using lodash-es (Recommended)

javascript
// Use ES module version of Lodash
import { map, filter, debounce } from 'lodash-es';

// Use
const result = map([1, 2, 3], n => n * 2);
const filtered = filter([1, 2, 3], n => n > 1);
const debouncedFn = debounce(fn, 300);

Advantages:

• Supports Tree-shaking
• Smallest bundle size
• Modern ES module format

4. Using babel-plugin-lodash (Recommended)

javascript
// After configuring babel-plugin-lodash, you can write code like full import
import _ from 'lodash';

// Use
const result = _.map([1, 2, 3], n => n * 2);

Babel configuration:

json
{
  "plugins": [
    "lodash"
  ]
}

Advantages:

• Keeps code concise
• Automatically converts to on-demand import
• Supports chaining optimization

Bundle Size Comparison of Different Import Methods

Test Code

javascript
// Use multiple Lodash methods
import _ from 'lodash';

const result = _.chain(data)
  .filter(item => item.active)
  .map(item => item.name)
  .uniq()
  .value();

Bundle Size Comparison

Import Method	Bundle Size (gzipped)	Description
Full Import	~70KB	Contains all methods
On-Demand Import	~5-10KB	Only contains used methods
lodash-es + Tree-shaking	~3-5KB	Optimal solution
babel-plugin-lodash	~3-5KB	Automatic optimization

Configuration Methods for On-Demand Import

1. Webpack Configuration

javascript
// webpack.config.js
module.exports = {
  // ...other configurations
  optimization: {
    usedExports: true,
    sideEffects: false
  },
  resolve: {
    alias: {
      lodash: 'lodash-es'
    }
  }
};

2. babel-plugin-lodash Configuration

Installation:

bash
npm install --save-dev babel-plugin-lodash

Configuration:

javascript
// .babelrc
{
  "plugins": [
    "lodash"
  ]
}

Or use babel.config.js:

javascript
module.exports = {
  plugins: [
    'lodash'
  ]
};

3. TypeScript Configuration

typescript
// tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

// Use lodash-es
import { map, filter } from 'lodash-es';

Application in Actual Projects

React Project Example

javascript
// utils.js
import { debounce, throttle } from 'lodash-es';
import { cloneDeep, isEqual } from 'lodash-es';

export const debouncedSearch = debounce((keyword) => {
  console.log('Searching:', keyword);
}, 300);

export const throttledScroll = throttle(() => {
  console.log('Scrolling');
}, 100);

export function deepCopy(obj) {
  return cloneDeep(obj);
}

export function deepEqual(obj1, obj2) {
  return isEqual(obj1, obj2);
}

Vue Project Example

javascript
// composables/useLodash.js
import { ref, onMounted, onUnmounted } from 'vue';
import { debounce } from 'lodash-es';

export function useDebounce(fn, delay) {
  const debouncedFn = debounce(fn, delay);
  
  onMounted(() => {
    debouncedFn();
  });
  
  onUnmounted(() => {
    debouncedFn.cancel();
  });
  
  return debouncedFn;
}

Node.js Project Example

javascript
// utils/helpers.js
const { map, filter, find } = require('lodash');

function processUsers(users) {
  return map(
    filter(users, user => user.active),
    user => ({
      id: user.id,
      name: user.name
    })
  );
}

module.exports = { processUsers };

Chaining Optimization

Problem: Chaining imports entire Lodash

javascript
// This will import the entire Lodash
import _ from 'lodash';

const result = _.chain(data)
  .filter(item => item.active)
  .map(item => item.name)
  .value();

Solution 1: Use lodash-chain

javascript
import chain from 'lodash/chain';
import filter from 'lodash/filter';
import map from 'lodash/map';

const result = chain(data)
  .filter(item => item.active)
  .map(item => item.name)
  .value();

Solution 2: Use lodash-es + babel-plugin-lodash

javascript
import _ from 'lodash';

const result = _.chain(data)
  .filter(item => item.active)
  .map(item => item.name)
  .value();

After configuring babel-plugin-lodash, it will automatically optimize to on-demand import.

Solution 3: Use Native Methods

javascript
// For simple chaining, you can use native methods
const result = data
  .filter(item => item.active)
  .map(item => item.name);

Performance Optimization Recommendations

1. Choose Appropriate Import Method

javascript
// ❌ Not recommended: Full import
import _ from 'lodash';

// ✅ Recommended: On-demand import
import { debounce, throttle } from 'lodash-es';

// ✅ Recommended: Single method import
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

2. Use lodash-es Instead of lodash

javascript
// ❌ Not recommended: Use lodash
import { map, filter } from 'lodash';

// ✅ Recommended: Use lodash-es
import { map, filter } from 'lodash-es';

3. Configure Webpack Alias

javascript
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      // Automatically replace lodash with lodash-es
      lodash: 'lodash-es'
    }
  }
};

4. Use babel-plugin-lodash

javascript
// .babelrc
{
  "plugins": [
    "lodash"
  ]
}

Common Questions

1. Chaining doesn't work after on-demand import?

Problem:

javascript
import { chain } from 'lodash-es';

const result = chain(data)
  .filter(item => item.active)
  .value();

Solution:

javascript
import chain from 'lodash/chain';
import filter from 'lodash/filter';
import map from 'lodash/map';

const result = chain(data)
  .filter(item => item.active)
  .map(item => item.name)
  .value();

2. TypeScript type errors?

Problem:

typescript
import { map } from 'lodash-es';

const result = map([1, 2, 3], n => n * 2);
// TypeScript may report an error

Solution:

typescript
import { map } from 'lodash-es';

const result = map<number, number>([1, 2, 3], n => n * 2);

Or install type definitions:

bash
npm install --save-dev @types/lodash-es

3. How to check bundle size?

Use webpack-bundle-analyzer:

bash
npm install --save-dev webpack-bundle-analyzer

javascript
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

Best Practices

1. Uniformly Use lodash-es

javascript
// utils/index.js
export { debounce } from 'lodash-es';
export { throttle } from 'lodash-es';
export { cloneDeep } from 'lodash-es';
export { isEqual } from 'lodash-es';

2. Create Utility Functions

javascript
// utils/lodash.js
import { debounce, throttle } from 'lodash-es';

export const createDebounce = (fn, delay) => debounce(fn, delay);
export const createThrottle = (fn, delay) => throttle(fn, delay);

3. Organize by Functional Modules

javascript
// utils/array.js
export { map, filter, reduce, find } from 'lodash-es';

// utils/object.js
export { get, set, merge, cloneDeep } from 'lodash-es';

// utils/string.js
export { camelCase, kebabCase, snakeCase } from 'lodash-es';

Summary

Lodash on-demand import is an important means of optimizing project performance:

1. Full Import: Simple but large size, not recommended
2. On-Demand Import: Small size, good performance, recommended
3. lodash-es: Supports Tree-shaking, optimal solution
4. babel-plugin-lodash: Automatic optimization, keeps code concise

In actual projects, it's recommended to:

• Prioritize using lodash-es
• Configure babel-plugin-lodash for automatic optimization
• Create unified utility function modules
• Regularly check bundle size

By reasonably using on-demand import, you can reduce Lodash's bundle size from 70KB to 3-5KB, significantly improving application performance.