Ace Editor ace.js File Size

Question

The minified ace editor js file from the github ace-builds repository (https://github.com/ajaxorg/ace-builds) is a whopping 275KB. This is a huge file size. Codemirror, a js editor of the same caliber is well under the 100KB mark.

It seems like there is a way to build ace.js. Is there a way to do this while drastically reducing file size?

Answer 1

ace.js which is 294kb is already built and minified version, so there's no way to reduce this drastically.

There are two reasons for this difference in size

1. ace has more features built in. So to make comparison fair we'll need to remove these features

    not minified ace.js is . . . . 530kb
   - multiselect . . . . . . . . . 484kb
   - folding . . . . . . . . . . . 451kb
   - bracketmatch, highlight selected 
     word, search, worker  . . . . 429kb
   - built in theme, unicode 
     support for selectWord  . . . 401kb
   

   others: things like, jank free scrolling while selecting text with mouse, animation on pageUp/Down, selecting lines from the gutter, better toggleComment, smart gotoLineEnd, indentGuides etc. are harder to remove, since they are not standalone modules.

   but Codemirror supports bidirectional and variable size fonts which compensates for some of the remaining ones so lets stop on this. Final size of cut down ace (let's call it ace--.js) is 401kb

   file         |size kb| zip  |uglify|uglify+zip|uglify-m-c|+zip      
   -------------|-------|------|------|----------|----------|----      
   ace.js       |  530  | 106  | 374  | 91.8     |292       |81.1
   ace--.js     |  401  | 77.1 | 279  | 65.2     |216       |56.5
   codemirror.js|  212  | 55.6 | 144  | 40.1     |100       |33.1
   

   the size that matters most is uglify+zip which isn't that much different

2. Second reason is coding style, Codemirrors style is very compact

   • it uses many closures (ace almost never uses closures)
   • it contains very few uses of this (493 vs 4373 in ace--)
   • doesn't use modules, everything is in one file, unlike ace which have 59 modules
   • and it has much shorter variable names

So if you need a very small editor, or don't like the way ace works and want to reimplement most of it, Codemirror is the better way to go.

But if you need an editor that is on par with desktop editors without adding 300kb of your own code ace is a better choice IMHO.