search

securingsincity / react-ace

React Ace Component
http://securingsincity.github.io/react-ace/
MIT License
4.08k stars 604 forks source link

Reduce bundle size #282

Open fumblehool opened 7 years ago

fumblehool commented 7 years ago

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

screen shot 2017-10-05 at 5 52 26 pm

How can I reduce the bundle size?

securingsincity commented 7 years ago

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

fumblehool commented 7 years ago

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

securingsincity commented 7 years ago

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

ignatevdev commented 7 years ago

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 commented 6 years ago

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 commented 5 years ago

Looking forward for good answer to this.

jondavidjohn commented 5 years ago

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

image

securingsincity commented 5 years ago

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 commented 5 years ago

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

rongyadong commented 4 years ago

any idea that we can reduce the bundle size?

Srinjoy-Santra commented 4 years ago

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

travisdahl commented 3 years ago

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

ashishRudder commented 2 years ago

I also need a lighter version. Having an sql editor with textmate theme and auto-completion is more than enough for my work. Don't need any other fancy features in that.

Bonfims commented 1 year ago

I also need a lighter version. Having an sql editor with textmate theme and auto-completion is more than enough for my work. Don't need any other fancy features in that.

indeed, i just want a functional json editor to a very small and simple project, and all other features that i will not use worries me.

Awesome work by the way