Feedback on react-beautiful-dnd dependencies

[simoami]

Bug or feature request?

react-beautiful-dnd is a heavy lib. It forces redux on architectures that don't use it. Think of a dependency that bundles jquery, when you explicitly made an effort to remove jquery.

Furthermore, it doesn't support tree-shaking, and all of the code is shipped as one dist file.

Expected behavior

Should be able to use an external dependency without taxing the consuming project with another css-reset and a redux lib.

Actual behavior

See attached screenshot:

What version of react-beautiful-dnd are you running?

v10.0.1

What browser are you using?

Google Chrome v70

[TrySound]

@simoami Seems like you are showing us the problem with size of not minified bundle. Try to add terser minifier in your stack.

The size of this project with dependencies (except react/react-dom) is just ~107kB https://github.com/atlassian/react-beautiful-dnd/blob/master/.size-snapshot.json#L9

Redux doesn't take too much. This lib is quite small but useful for this project because of optimisations inside. Redux in transitive dependencies doesn't force you to have it in your project. Also redux is quite small library and fully used by this project. There's nothing to treeshake. React-beautiful-dnd is itself not quite treeshakable, but there's also nothing to treeshake.

[alexreardon]

Thanks @TrySound.

@simoami right now we are using Redux and a few other dependencies, but they are implementation details and should in no way impact our public api. We use Redux for performance reasons and a few others that I won't go into here. One day we might move from it.

Comparative justification can be dangerous, but I think it can be used with care.

all values are gzip values

react-dnd is 17.4kb with an additional 8.24kb for the react-dnd-html5-backend. If you also want to support mobile you will need the react-dnd-touch-backend which is 5.54kb. So that would be 31.1kb. react-beautiful-dnd is 31.3kb assuming you cannot de-duplicate any dependencies. So react-beautiful-dnd is no bigger than react-dnd.

react-beautiful-dnd and react-dnd have different feature sets and goals, but the thing I want to draw out is that drag and drop is a complex space to get right. What might look simple to a user and to a consumer, can actually take a considerable amount of complexity under the hood.

We are keen to continue to reduce our bundle size, and did so in version 10 - even though we shipped a whole lot of improvements and new features.

[simoami]

Thanks @TrySound and @alexreardon I appreciate taking the time to clarify things. My goal was to share thoughts that could potentially turn into improvement tickets if they are deemed legitimate concerns. And very often first time impression can be valuable.

I understood there's not much to tree-shake since all the features are almost needed for all use cases. But this could change with the project growing, you want the architecture to support size optimizations.

[CarstenLeue]

@alexreardon in you comment you mentioned "react-beautiful-dnd is 31.3kb". That would be awesome, but in our build it shows up as 152.74 kB in the production build (fully minimized via terser and packaged and tree shaken with webpack 4).

Were the 31KB a typo or is there probably anything wrong with out build process? Would you just expect 31kB to show up?

Version: react-beautiful-dnd@10.1.1 webpack@4.31.0

[TrySound]

@CarstenLeue It's gzipped size https://github.com/atlassian/react-beautiful-dnd/blob/master/.size-snapshot.json#L15

[simo-eskalera]

@CarstenLeue You can see the full stats here: https://bundlephobia.com/result?p=react-beautiful-dnd@11.0.3

There's a difference between minified and gzipped sizes.

[CarstenLeue]

Thanks for the clarification. So around 110KB for the minified, non-gzipped size - which is what would show up in my source map explorer - looks like the expected size.

[aretheregods]

@alexreardon @TrySound React-beautiful-dnd is actually more than twice as large gzipped as react-dnd. And it's even larger still than any other react drag and drop library I could find on npm. It's an extremely large library for having really only one functionality. For example, the entirety of material-components-web with dozens of components is only 49KB gzipped while this library with ultimately a single purpose is 31KB. Dragging and dropping is certainly not a trivial pursuit, but for it to be so large a codebase seems excessive - especially considering that you could replace redux with hooks - useReducer - and rid users of the redux dependency. This would save 7.5kb gzipped between react-redux and redux. Is there an actual technical reason why you wouldn't use component state instead of redux?

[felixmpaulus]

It comes out at over 200kb for me. Seems very huge. Any idea what I might be doing wrong? running version 13.1.1

[mleister97]

@felixmpaulus Did you find anything useful? The library also results in a rendered size of 200kb for me.