lodash-webpack-plugin

What is lodash-webpack-plugin?

The lodash-webpack-plugin is a plugin for Webpack that allows you to cherry-pick Lodash modules to include in your build, which can significantly reduce the size of your final bundle. It provides granular control over which Lodash functions are included, optimizing the build process and improving performance.

What are lodash-webpack-plugin's main functionalities?

Cherry-picking Lodash functions

This feature allows you to include only specific Lodash functions in your Webpack build. In this example, only the 'collections' and 'paths' functions from Lodash are included, reducing the bundle size.

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
  plugins: [
    new LodashModuleReplacementPlugin({
      'collections': true,
      'paths': true
    })
  ]
};

Customizing Lodash builds

This feature allows you to customize your Lodash build by enabling or disabling specific features. In this example, 'shorthands' and 'cloning' features are enabled, allowing for more efficient builds.

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
  plugins: [
    new LodashModuleReplacementPlugin({
      'shorthands': true,
      'cloning': true
    })
  ]
};

Disabling specific Lodash features

This feature allows you to disable specific Lodash features that you do not need. In this example, 'caching' and 'deburring' features are disabled, further reducing the bundle size.

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
  plugins: [
    new LodashModuleReplacementPlugin({
      'caching': false,
      'deburring': false
    })
  ]
};

Other packages similar to lodash-webpack-plugin

babel-plugin-lodash

babel-plugin-lodash is a Babel plugin that cherry-picks Lodash modules to include in your build, similar to lodash-webpack-plugin. It works at the Babel level, allowing for tree-shaking and reducing the final bundle size. It is particularly useful if you are already using Babel in your project.

lodash-es

lodash-es is a version of Lodash that provides ES modules, which can be tree-shaken by modern bundlers like Webpack. While it does not offer the same granular control as lodash-webpack-plugin, it allows for more efficient builds by leveraging ES module tree-shaking.

lodash-amd

lodash-amd is a version of Lodash that provides AMD modules. It is useful for projects that use AMD module loaders like RequireJS. While it does not offer the same level of optimization as lodash-webpack-plugin, it provides modularity and can help reduce the bundle size in AMD-based projects.

README

lodash-webpack-plugin

Create smaller Lodash builds by replacing feature sets of modules with noop, identity, or simpler alternatives.

This plugin complements babel-plugin-lodash by shrinking its cherry-picked builds even further!

DISCLAIMER: Using this plugin without enabling the proper feature sets may cause lodash functions to behave in unexpected ways. Methods may appear to work, however they might return incorrect results.

Install

$ npm i --save lodash
$ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack

Example

Usage

webpack.config.js

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');

module.exports = {
  'module': {
    'rules': [{
      'use': 'babel-loader',
      'test': /\.js$/,
      'exclude': /node_modules/,
      'options': {
        'plugins': ['lodash'],
        'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
      }
    }]
  },
  'plugins': [
    new LodashModuleReplacementPlugin,
    new webpack.optimize.UglifyJsPlugin
  ]
};

Opt-in to features with an options object:

new LodashModuleReplacementPlugin({
  'collections': true,
  'paths': true
});

Feature Sets

The following features are removed by default (biggest savings first):

Feature	Description
shorthands	Iteratee shorthands for _.property, _.matches, & _.matchesProperty.
cloning	Support “clone” methods & cloning source objects.
currying	Support “curry” methods.
caching	Caches for methods like _.cloneDeep, _.isEqual, & _.uniq.
collections	Support objects in “Collection” methods.
exotics	Support objects like buffers, maps, sets, symbols, typed arrays, etc.
guards	Guards for host objects, sparse arrays, & other edge cases.
metadata	Metadata to reduce wrapping of bound, curried, & partially applied functions. (requires currying)
deburring	Support deburring letters.
unicode	Support Unicode symbols.
chaining	Components to support chain sequences.
memoizing	Support _.memoize & memoization.
coercions	Support for coercing values to integers, numbers, & strings.
flattening	Support “flatten” methods & flattening rest arguments.
paths	Deep property path support for methods like _.get, _.has, & _.set.
placeholders	Argument placeholder support for “bind”, “curry”, & “partial” methods. (requires currying)