Avoid including full Lodash build

[nylen]

Currently Lodash is a significant portion of the build size (source):

In Automattic/wp-calypso#6539 this approach was removed from Calypso in favor of a Babel plugin which automatically transforms imports as follows:

- import { map } from 'lodash';
+ import map from 'lodash/map';

I've opted for the older approach here (transforming imports manually + forbidding "root" lodash imports) because it would be quite difficult to add a new babel plugin without ejecting from create-react-app. (We could do it, but we would have to override npm run build with a custom command, require the webpack config from react-scripts ourselves, and make our changes to the webpack config object before the build runs.)

See also Automattic/eslint-plugin-wpcalypso@02a997a.

With the changes here, the minified build is down from 513kB to 450kB. (The graphic above shows only unminified sizes; Lodash unminified size is down from 608kB to 119kB).

[nylen]

Including custom Webpack config / Babel plugins with create-react-app appears to be discouraged. Some more info:

• Custom additional webpack config? facebook/create-react-app#99 - "We don't intend to provide Webpack specific overrides because it will be very fragile."
• Support custom babel presets & plugins via environment variables facebook/create-react-app#900 - "We have decided to punt on custom Babel plugins in the close future. This is more of an advanced use case, and it will be hard for us to guarantee compatibility with this while shipping new features."
• Use Relay facebook/create-react-app#462 - discussion about adding the relay library.

[nylen]

Since today is hack day at Automattic, let's try it anyway. 6838226 overrides the Webpack config from create-react-app via a small custom build script.

[youknowriad]

Well! this does not seem so violent, so I would agree to merge it.

I wanted to note also that CRA is waiting to Webpack 2 to go out of beta to integrate it. I think we'll have tree shaking out of the box then.

[nylen]

Yeah, I think this turned out pretty nicely, and it's a good example of how to override CRA configs (but this is definitely unsupported and something to be careful with).

[timarney]

Again

"Definitely unsupported and something to be careful with"

https://github.com/timarney/react-app-rewired

[nylen]

Configure the unconfigurable

💥

[timarney]

I don't have time at the moment to test but if your using CRA I would be curious to see assuming it ended up being compatible (it should) what the file size would be for you if you flipped to use Preact see this example https://github.com/timarney/react-app-rewired/blob/master/examples/preact.md

[gaearon]

because it would be quite difficult to add a new babel plugin without ejecting from create-react-app

Have you considered filing an issue in CRA describing your use case? Just because we don't allow configuration doesn't mean we won't be happy to merge a plugin that reduces bundle size for users of one of the most popular libraries on npm.

[gaearon]

I'd totally take a PR adding lodash plugin to our Babel config.

[youknowriad]

@gaearon Thanks for the heads up. You're right, we should have thought about raising this in CRA. I guess we just thought this was specific to a library.

I see that it's been worked on. That's awesome, we'll drop the custom script once released.