Import and package only the 2D component about react-force-graph

[vasturiano]

@bbeaumatin @tomazy I think it's a good idea to provide separate packages, for cases when tree-shaking is difficult to configure. So, I went ahead and just published them, that means you can now do:

import ForceGraph2D from 'react-force-graph-2d';

Hopefully that helps with the bundle sizes. :)

[bbeaumatin]

@vasturiano Thanks a lot for that splitting, in the end the result is close to using import ForceGraph from 'react-force-graph/src/ForceGraph2D' but it saves a lot of time during the npm install since it doesn't need anymore all the dependencies used in the VR and the 3D components. Not something we do everyday on our local dev environments but multiple times a day on our CI pipeline.

[vasturiano]

Hi @bbeaumatin , if you use a build framework that has tree-shaking abilities, you should not be bundling code that is not being imported. I know rollup does tree-shaking. I thought webpack could do it too?

If you can't get tree-shaking to work, a possible work around is to import force-graph instead, and apply a React wrapper: react-kapsule around it. react-force-graph is basically just that scaffolding.

[tomazy]

@bbeaumatin If you're using webpack you can try:

import ForceGraph from 'react-force-graph/src/ForceGraph2D'

@vasturiano Thanks for the workaround with react-kapsule - I ended up using it instead of react-force-graph. 400MB of AFrame was a bit too much ;-) Would you consider splitting this package into 3 separate ones (react-force-graph-2d, react-force-graph-3d and react-force-graph-vr)?
Thanks for your work! Great stuff!

[bbeaumatin]

Hi, thanks to both of you for the answers. @tomazy's first trick worked instantly and was easy to implement. But I will for sure investigate in why webpack tree shaking didn't work in my initial case.
And i'll take a look also into react-kapsule.

Again... great work, really easy to use components. Thank you very much!