RFC: import lodash modules explicitly, vs _ import

[cdaringe]

problem statement

current implementations do:

import _ from lodash

this means that at bundle time, all of lodash gets included

solution

use fn-specific imports

import get from 'lodash/get'
import uniq from 'lodash/uniq'

bundle sizes will now be small!

[levithomason]

We have this done automatically by babel using https://github.com/lodash/babel-plugin-lodash. Compare the src and dist directories to see it in action.

[cdaringe]

WAT! get out of town! Cool :)

[levithomason]

Very cool, even more cool is you can pass { id: semantic-ui-react } to it and it will do the same thing for your bundles of our package.

You can follow this and more optimization work in #731.

[mmueller1589]

I tried the babel plugin lodash. This is the .balerc part:

"plugins": [
    ["lodash", { "id": "semantic-ui-react" }]
]

Unfortunately my imports do not work anymore after that.

Error running template: ReferenceError: Grid is not defined
    at SearchPage.render (imports/scenes/Start/SearchPage.jsx:41:7)

I do the imports per module like this:

import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid';

Any idea what might be the issue?

[layershifter]

If you're using babel-plugin-lodash, you need to use usual imports import { Grid } from 'semantic-ui-react'. If you're using Webpack 4, you don't need it at all, tree shaking is working.

Please Do Not Necropost!