React-ace: Reduce bundle size

[fumblehool]

I analyzed my bundle.js using webpack-bundle-analyzer and It is nearly half the size of total bundle. I've tried different releases of react-ace but all have same result

How can I reduce the bundle size?

[securingsincity]

unfortunately @fumblehool brace and ace are enormous libraries. I would love to find a way to reduce the bundle size as well.

[fumblehool]

Is there some way to do this? I would love to help you.

[securingsincity]

I would be open to any help. I'm not sure what it is that is driving the size other than the dependencies.

[ignatevdev]

You could split your bundle on top level routes which use react-ace.
For example, if you have a route /posts/new for a page, which includes the editor, you could load the page's component asynchronously with System.import.

In react-router 3 this is possible by using getComponent prop on <Route>

This won't solve the problem of the huge size of ace and brace, and I think that nothing would, every wysiwyg library is huge in size. But at least your website won't load this extra 1 mb of data when it is not needed

[jan-osch]

Brace makes up to 66% of my relatively complex SPA build with webpack (create-react-app).

Do you know any way to reduce the size of brace? Is there any aggressive minification you can apply? It would really help

[MarvanN]

Looking forward for good answer to this.

[jondavidjohn]

I built a tool to help you analyze webpack bundles for size regressions, and report them directly to GitHub PRs. It's free for open source, so it might be worth checking out and helpful in this scenario.

https://packtracker.io

[securingsincity]

so with v8 of react-ace we've dropped support for brace and only should be importing the ace files you absolutely need. In theory bundle sizes should be smaller but i haven't tested this.

[TeoTN]

Not really, it's even a bit worse as brace was 640.83KB whereas ace-builds is 665.48KB.
It's huge :/

[rongyadong]

any idea that we can reduce the bundle size?

[Srinjoy-Santra]

I would so like to have the bundle size reduced. Currently, I am using code splitting to lazy load the editor component.

[travisdahl]

Running into the same problem where the bundle size is unacceptable for my project. I was trying react-syntax-highlighter because they have a _light_ version. May be worth looking into how they handle it. I think the ace plugin is actually better and was hoping it had a similar light version.

https://github.com/react-syntax-highlighter/react-syntax-highlighter#light-build