Create-react-app: babel-plugin-lodash

[c0debreaker]

I'm having a hard time digging through the closed issues looking for solutions on how to use this plugin. Can it be used with create-react-app without ejecting our app?

Thanks!

[Timer]

Unfortunately, no. It cannot be used without ejecting.
We will reconsider this feature if lodash drops chain from the API.

You can, however, use the method described here to reduce your bundle size.

[c0debreaker]

Thanks a lot!

[Timer]

No problem!

[c0debreaker]

It didn't work for me. The bundle size became larger

Using the lodash that came with create-react-app

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  237.92 KB  build/static/js/main.f953a88f.js
  1.83 KB    build/static/css/main.2bf0ac43.css

Then i ran rm -rf build and installed lodash.groupby and lodash.foreach. I used it this way

import _groupBy from 'lodash.groupby';
import _forEach from 'lodash.foreach';

and here are the results

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  241.14 KB  build/static/js/main.96d96f68.js
  1.83 KB    build/static/css/main.2bf0ac43.css

[Timer]

You may be depending on a different version of lodash than you're installing using that unsupported behavior, but I suggest using the slash method not dot.

[c0debreaker]

Ok, I'll try it.

[c0debreaker]

I tried lodash/groupby and lodash/foreach and here are the results

File sizes after gzip:

  242.85 KB  build/static/js/main.0d2dc2db.js
  1.83 KB    build/static/css/main.2bf0ac43.css

[Timer]

Like I said, "Using the lodash that came with create-react-app" is not a supported behavior and properly importing lodash is probably grabbing a newer, larger version of the library.

Sorry, but I don't think you can tune this much more without ejecting. 😬 Though I don't think babel-plugin-lodash is going to fix this problem.
Let me know if you find out more information and we can add it to the readme. 😄

[gaearon]

All babel-plugin-lodash does is replace imports like import { groupBy } from 'lodash with imports like import groupBy from 'lodash/groupBy'. It won’t magically make the bundle smaller, and if you already write granular imports, this is as good as it will get.

And yea, you need to npm install --save lodash.

[c0debreaker]

Yup, after doing a lot of trial and error even with Dan's suggestion, the difference wasn't that much. However, guess what I found out? I changed the way I was importing Material-UI and OMG, I brought it down to 154KB. I'm very happy for that :)

Thanks to both you! Oh, I LOVE CREATE-REACT-APP so much! This is the best creation next to loaf of bread. :)