React-draft-wysiwyg: How to optimize the size of the webpack package

[SturdyCat]

How to optimize the size of the webpack package

[Xuhao]

Looks there's no way to do this currently.
npm package expose the dist version, so we have to import the whole :(

[mguijarr]

@Xuhao wow how did you make this map of the files? Very interesting !

[Xuhao]

@mguijarr https://github.com/th0r/webpack-bundle-analyzer

[Pensarfeo]

We are also facing this problem, any solutions?

[ibudisteanu]

Why the react-draft-wysiwyg.js is so large? Definitely there is a bug making the distribution so large. It can not be large than react-relay or... react-dom!

LE: I think I have found the problem that is causing this. The React-Draft-WYSIWYG uses another package called Draftjs-Utils (which is also developed by @jpuri ), but the final package react-draft-wysiwyg includes again the already imported draft.js from draftjs-utils library. So, the rephrase it, I believe that the react-draft-WYSIWYG includes two times the draft-js module. One from React-Draft-WYSIWYG library and another one from the Draftjs-utils node_module.

[ibudisteanu]

My LE is right. The problem of having a such large bundle from React-Draft-WYSIWYG is that the draftjs package(module) is imported two times. Once in the React-draft-wysiwyg and another time in the Draftjs-Utils. I have deleted the node_module (package) of Draftjs-Utils and downloaded it manually and included manually in the React-Draft-WYSIWYG source code. This reduced by a lot the code, removing the duplicate import of draft.js code

it reduced by about 300kb

[jpuri]

Very nice finding, thanks @ibudisteanu ,

I also looked into it, its actually not draftjs but immutableJs that is increasing bundle size: https://github.com/jpuri/draftjs-utils/blob/master/package.json
I will fix this also.

Related issue: https://github.com/jpuri/react-draft-wysiwyg/issues/379

[jpuri]

Just published version 1.10.2, changing Immutable to peer dependency. Wysiwyg size as low as 250kb already 😄

[jpuri]

I have also been thinking of breaking editor into modules which can be installed independently as needed. This will result in bundle size of about 100-150 kb.

[josser]

Is there any workaround or fix for the issue described by @ibudisteanu?

[Flaeron]

Found this issue after saw how large my bundle size with react-draft-wysiwyg 😕

[michalpokojski]

Any news about reducing bundle size ?

[arufian]

Another workaround is to change react-draft-wysiwyg's package.json main from:

"main": "dist/react-draft-wysiwyg.js",

into

"main": "src/Editor/index.js",

It cut off the size around 200kb

before

after