Reduce the size impact of lodash by picking the required modules only

[kiskoza]

PR Checklist

PR Structure

• This PR has reasonably narrow scope (if not, break it down into smaller
  PRs).
• This PR avoids mixing refactoring changes with feature changes (split into
  two PRs otherwise).
• This PR's title starts is concise and descriptive.

Thoroughness

• This PR adds tests for the most critical parts of the new functionality or
  fixes.
• I've updated any docs, .md files, etc… affected by this change.

What

Change import { module } form "lodash" lines to import module from "lodash/module" to reduce the size of the bundle.

Why

Currently the code bings the whole lodash module to the final browser bundle which ends up being bigger than it should be. If you import only the required packages, you can reduce the size of the final bundle.

Steps to reproduce:

yarn build:import
yarn build:browser
ls -lah dist/browser

On the main branch it generates a 105K file for index.js, with this fix the file is only 67K

Known limitations

N/A

[fnando]

This is great! Thanks!

[trajano]

Interesting because with tree shaking at least on React-native projects there's no change because of tree shaking.

Assuming lodash 5.0 ever comes out they already marked the use as deprecated https://lodash.com/per-method-packages

But since the OP has proof otherwise I guess it's fine.

[fnando]

@trajano I think we're good, as we're doing exactly what they're suggested on that link you sent: importing individual functions, but out of the lodash package (rather than individual packages).

The size reduction was measured against the browser bundle, so I can't tell you it'd also reduce react-native's.