Gatsby Plugin Lodash

Gatsby Plugin Lodash adds the Lodash webpack and Babel plugins to your Gatsby build for easy modular, small Lodash builds. This plugin automatically optimizes Lodash usage by tree-shaking unused features and transforming imports to reduce bundle size.

Package Information

• Package Name: gatsby-plugin-lodash
• Package Type: npm
• Language: JavaScript
• Installation: npm install gatsby-plugin-lodash lodash

Core Imports

This plugin does not export any functions for direct import. It works as a Gatsby plugin that automatically configures your build process.

Basic Usage

Add the plugin to your gatsby-config.js:

// Simple usage - enables all Lodash features
module.exports = {
  plugins: [`gatsby-plugin-lodash`]
};

With options to disable specific features:

// Advanced usage - disable specific feature sets to reduce bundle size
module.exports = {  
  plugins: [
    {
      resolve: `gatsby-plugin-lodash`,
      options: {
        disabledFeatures: [`shorthands`, `cloning`]
      }
    }
  ]
};

Architecture

Gatsby Plugin Lodash optimizes Lodash usage through a dual-plugin approach:

• Build-time Webpack Plugin: During the build-javascript stage, lodash-webpack-plugin is configured to enable tree-shaking of unused Lodash features based on the specified feature sets
• Transform-time Babel Plugin: @sigmacomputing/babel-plugin-lodash transforms Lodash imports during the Babel compilation phase to ensure optimal module resolution
• Feature Set Control: The plugin provides granular control over 16 different Lodash feature sets, allowing developers to disable unused functionality for smaller bundle sizes

This architecture ensures that only the Lodash utilities actually used in your code are included in the final JavaScript bundle, significantly reducing bundle size without requiring manual import optimization.

Capabilities

Webpack Configuration

Automatically configures the lodash-webpack-plugin during the build-javascript stage to enable tree-shaking of unused Lodash features.

/**
 * Gatsby lifecycle hook that configures webpack with lodash-webpack-plugin
 * @param {object} context - Gatsby webpack config context
 * @param {object} context.actions - Gatsby actions for setting webpack config
 * @param {string} context.stage - Current build stage
 * @param {object} options - Plugin options
 * @param {string[]} options.disabledFeatures - Array of feature sets to disable
 */
function onCreateWebpackConfig(
  { actions, stage },
  { disabledFeatures = [] }
): void;

Babel Configuration

Automatically configures @sigmacomputing/babel-plugin-lodash for import transformations.

/**
 * Gatsby lifecycle hook that configures Babel with @sigmacomputing/babel-plugin-lodash
 * @param {object} context - Gatsby Babel config context  
 * @param {object} context.actions - Gatsby actions for setting Babel config
 */
function onCreateBabelConfig({ actions }): void;

Configuration Options

disabledFeatures

interface PluginOptions {
  /** Array of Lodash feature sets to disable for smaller bundle size */
  disabledFeatures?: string[];
}

Available Feature Sets:

All feature sets are enabled by default. You can selectively disable them by including their names in the disabledFeatures array:

• "shorthands" - Lodash shorthand syntax support
• "cloning" - Object cloning functionality
• "currying" - Function currying support
• "caching" - Caching functionality
• "collections" - Collection methods
• "exotics" - Exotic object support
• "guards" - Type guard functions
• "metadata" - Metadata functionality
• "deburring" - String deburring
• "unicode" - Unicode support
• "chaining" - Method chaining
• "memoizing" - Memoization support
• "coercions" - Type coercions
• "flattening" - Array/object flattening
• "paths" - Object path utilities
• "placeholders" - Placeholder functionality

Usage Examples:

// Disable shorthand syntax and cloning to reduce bundle size
{
  resolve: `gatsby-plugin-lodash`,
  options: {
    disabledFeatures: [`shorthands`, `cloning`]
  }
}

// Minimal Lodash build - disable many features
{
  resolve: `gatsby-plugin-lodash`, 
  options: {
    disabledFeatures: [
      `shorthands`, `cloning`, `currying`, `caching`, 
      `exotics`, `guards`, `metadata`, `deburring`,
      `unicode`, `chaining`, `memoizing`, `coercions`,
      `flattening`, `placeholders`
    ]
  }
}

How It Works

1. Webpack Plugin: During the build-javascript stage, the plugin adds lodash-webpack-plugin to your webpack configuration with the specified feature sets enabled/disabled.

2. Babel Plugin: The plugin configures @sigmacomputing/babel-plugin-lodash in your Babel pipeline to transform Lodash imports for optimal tree-shaking.

3. Automatic Optimization: Together, these plugins ensure that only the Lodash utilities you actually use are included in your final bundle, significantly reducing JavaScript bundle size.

Dependencies

The plugin automatically manages these dependencies:

• lodash-webpack-plugin@^0.11.6 - Webpack plugin for modular Lodash builds
• @sigmacomputing/babel-plugin-lodash@^3.3.5 - Babel plugin for Lodash import transformations
• @babel/runtime@^7.20.13 - Babel runtime helpers

Peer Dependencies

• gatsby@^5.0.0-next - Compatible with Gatsby v5 and above
• lodash - You must install Lodash separately to use its utilities