LodashImportUpdater

A script that updates JS files to use lighter lodash imports and reduce the bundle's size

• What it does
• How to use it
• How it does its thing
• Bundle size improvement
• Support

What it does

It changes default lodash imports like:

import _ from 'lodash';

_.map(array, mapper);

_(array)
  .filter(predicate)
  .map(transformer)
  .value();

To method imports like:

import filter from 'lodash/filter';
import flow from 'lodash/flow';
import map from 'lodash/map';

map(array, mapper);

flow([
  (_) => filter(_, predicate),
  (_) => map(_, predicate),
])(array);

This allows tree-shaking to work efficiently and to shave off a good part of lodash from your app bundle, read this article for more details.

A more complete example of what is supported is available in the examples.

:information_source: If you spot a code pattern where the lodash import is not updated, please either submit a PR or open an issue with a base snippet of code that shows the problematic code pattern.

How to use it

npm install --global lodash-import-updater
update-lodash-imports "$GLOB_FOR_YOUR_SOURCE_CODE"

The glob is interpreted by fast-glob if quoted, by your shell if not. This has impacts on how ** is interpreted.

In your shell, ** probably strictly means one folder of any name in the current location, this means that update-lodash-imports folder/**/*.js matches folder/whatever/file.js but not folder/whatever.js or folder/subfolder/subsubfolder/whatever.js.

With fast-glob, ** means any directory recursively. This means that update-lodash-imports 'folder/**/*/js' matches all the following files folder/whatever/file.js, folder/whatever.js, and folder/subfolder/subsubfolder/whatever.js.

For more information on how the globs work, search for documentation on your shell's globbing system. For fast-glob, the documentation is here.

:warning: Beware the transformed code probably won't follow your formatter/linter's rules. You should re-apply them afterwards with your usual tools (ex: npx eslint --fix .).

Example:

update-lodash-imports 'src/**/*.js'

How it does its thing

It uses JSCodeshift to parse your code to an AST, then applies a transformation and re-generates the source code from the new AST.

Bundle size improvement

| | Legacy imports | Method imports | | -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------- | | Without tree shaking | 94.1 Kb | 61.8 Kb | | With tree shaking | 92.4 Kb | 24.0 Kb |

Support

This tool has been written with minimal effort, this means that no effort went into building a comprehensive test suite or checking compatibility for use in other OSes than the author's.

This tool therefore should work seamlessly on UNIX systems but there is no guarantee that it works on Windows.

PRs are welcome if someone intends to fix this.