rollup-plugin-optimize-lodash-imports

Optimize lodash imports with Rollup.js

Like babel-plugin-lodash but runs in rollup.js without Babel. Also includes an option to use lodash-es for cases where you're outputting CommonJS and ES builds and want your ES builds to transparently use lodash-es.

This input

import { isNil, isString } from "lodash";
import { padStart as padStartFp } from "lodash/fp";

Becomes this output

import isNil from "lodash/isNil";
import isString from "lodash/isString";
import padStartFp from "lodash/fp/padStart";

useLodashEs for ES Module Output

lodash-es is not usable from CommonJS modules, but sometimes you'll use Rollup for a project with two outputs: one for ES and one for CommonJS. In this case, you can offer your users the best of both worlds:

Your source

import { isNil } from "lodash";

Your Rollup Outputs

CommonJS

import isNil from "lodash/isNil";

ES (with useLodashEs: true)

import { isNil } from "lodash-es";

Usage

import optimizeLodashImports from "rollup-plugin-optimize-lodash-imports";

export default {
  input: "src/index.js",
  output: {
    dir: "dist",
    format: "cjs",
  },
  plugins: [optimizeLodashImports()],
};

Options

Configuration can be passed to the plugin as an object with the following keys:

exclude

Type: String | Array[...String]
Default: null

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.

include

Type: String | Array[...String]
Default: null

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.

useLodashEs

Type: boolean
Default: false

If true, the plugin will rewrite lodash imports to use lodash-es.

Note: the build will fail if your Rollup output format is not also set to es!

Limitations

Default imports are not optimized

Unlike babel-plugin-lodash, there is no support for optimizing the lodash default import, such as in this case:

// this import can't be optimized
import _ from "lodash";

export function testX(x) {
  return _.isNil(x);
}

The above code will not be optimized, and Rollup will print a warning.

To avoid this, always import the specific method(s) you need:

// this import will be optimized
import { isNil } from "lodash";

export function testX(x) {
  return isNil(x);
}

Why?

There are multiple issues surrounding tree-shaking of lodash.

babel-plugin-lodash solves the issue, but it requires Babel. Many projects use @rollup/plugin-typescript which offloads transpiling to tsc. It seems a waste to add Babel to the mix just to use babel-plugin-lodash.

Other alternatives include eslint-plugin-lodash with the import-scope rule enabled. This works, but requires your time to fix all of those imports.

The lodash-es support was inspired by tsdx. It can be used to solve an issue where toolchains view lodash-es and lodash as separate packages, doubling up on the individual lodash methods shipped to browsers.