王牌编辑器 ace.js 文件大小答案

【问题标题】：Ace Editor ace.js File Size王牌编辑器 ace.js 文件大小
【发布时间】：2012-08-30 05:22:28
【问题描述】：

来自 github ace-builds 存储库 (https://github.com/ajaxorg/ace-builds) 的缩小版 ace 编辑器 js 文件高达 275KB。这是一个巨大的文件大小。 Codemirror，同口径的js编辑器在100KB以内。

似乎有一种方法可以构建 ace.js。有没有办法在大幅减小文件大小的同时做到这一点？

【问题讨论】：

你用了多少语法高亮？
只有 CSS 和 HTML。这些语言的每个文件只有大约 20KB。如果你问有多少不同的 js 语法高亮，那么只有一个：Ace Editor。

标签： javascript editor ace-editor

【解决方案1】：

294kb 的 ace.js 已经构建和缩小版本，因此无法大幅减少。

造成这种大小差异的原因有两个

ace 内置了更多功能。因此，为了公平比较，我们需要删除这些功能

 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

其他：比如，用鼠标选择文本时无卡顿滚动， pageUp/Down 上的动画，从装订线中选择行，更好的 toggleComment、智能 gotoLineEnd、indentGuides 等。更难移除，因为它们不是独立的模块。

但 Codemirror 支持双向和可变大小字体它弥补了一些剩余的所以让我们停下来。 cut down ace（我们称之为 ace--.js）的最终大小为 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

最重要的大小是uglify+zip，差别不大

第二个原因是编码风格，Codemirrors 风格非常紧凑
- 它使用了很多闭包（ace 几乎从不使用闭包）
- 它包含很少使用this （493 vs 4373 in ace--)
- 不使用模块，所有内容都在一个文件中，不像 ace 有 59 个模块
- 而且它的变量名要短得多

因此，如果您需要一个非常小的编辑器，或者不喜欢 ace 的工作方式并希望重新实现其中的大部分，Codemirror 是更好的选择。

但是，如果您需要一个与桌面编辑器相当的编辑器而不添加 300kb 自己的代码，那么恕我直言，ace 是更好的选择。

【讨论】：

对这些强大的 html5 代码编辑器的精彩调查。王牌令人印象深刻......谢谢你

【解决方案2】：

为什么不简单地使用 CodeMirror？恕我直言，这是极好的。

【讨论】：

不支持移动设备。打字会很丑。