react-ace
react-ace copied to clipboard
securingsincity
Reduce bundle size
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?
unfortunately @fumblehool brace and ace are enormous libraries. I would love to find a way to reduce the bundle size as well.
I would be open to any help. I'm not sure what it is that is driving the size other than the dependencies.
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
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
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.
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.
Not really, it's even a bit worse as brace was 640.83KB whereas ace-builds is 665.48KB. It's huge :/
I would so like to have the bundle size reduced. Currently, I am using code splitting to lazy load the editor component.
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
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.
I also need a lighter version. Having an
sqleditor withtextmatetheme 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
