reducing library file size

[frankietaylor]

Can you please provide some insights as to why the min.js size is so big compared to other rich text editing libraries - wysihtml5, TinyMCE Is there any way to reduce this distribution size. Currently for using this library, we need to bundle Reactjs (~134KB) + Immutablejs (~56KB) + Draftjs (~120KB)

[hellendag]

How large are those other libraries in KB?

[lincolndbryant]

Its a bit hard to compare since much of Tinymce's functionality comes from optional plugins. some plugins like list and paste are included functionality in draft, but others like table, media, and image are not. A full featured tinymce is just under 200K gzipped https://cdn.tinymce.com/4/tinymce.min.js - The includes Sizzle, it can be smaller omitted to reduce size if you already have jQuery/Sizzle.

We're a little concerned about the lack of a plugin structure for Draft - seems like it will get out of hand fast if we cannot select only features we need.

[hellendag]

@lincolndbryant, what kinds of features do you have in mind? Note that the objective of Draft is to provide a framework to build complex editors, not to provide a full editor with a plugin architecture built in.

[zpao]

The dev version of TinyMCE uncompressed is 1.2MB. This is what you're comparing to with your above numbers (~310KB, so ~25% of the size). If you look at minified+gzip, React is ~40KB. Draft is ~37KB (and actually there's a little bit to shave off there with some webpack config), immutable is ~16KB. That's still 50% the size of tinymce. If you bundle React+Draft+immutable together you can shave off even a few more bytes.

As for plugins, well, I think that ends up being a bit of a tangential (but still important & interesting) discussion, but it should probably happen separately from the file size discussion. Remember that we just shipped so I think we're all still figuring out what happens next and we & the community will be building :)

[hellendag]

Going to go ahead and close this, since I think @zpao's data helps answer the question.

We can continue talking about plugin architecture separately as needed.

[perfectyang]

Have someone ever done custom block of upload image using draft.js + reactjs , i have no idea in my
mind . Ask for example online

[hellendag]

Sorry, I don't think this is the right thread to ask about custom blocks or image uploading.

[perfectyang]

I am a beginner for using draftjs, do you have some examples about image uploading with draftjs

[adrian2x]

I'm currently building a project that imports draft-js using webpack. I have react, react-dom and Immutable as externals, which I load from a CDN. However, for some reason draft-js still bundles react and Immutable into it's own code. Is there any way I can split those dependencies so that they use the ones loaded externally? This would result in drastically smaller sizes for draft-js itself :) cc @hellendag @zpao @lincolndbryant