6

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

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

4

2 回答 2

14

294kb 的 ace.js 已经构建和缩小版本，所以没有办法大幅减少。

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

  1. 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 并没有太大的不同

  2. 第二个原因是编码风格，Codemirrors 风格非常紧凑

    • 它使用了很多闭包（ace 几乎从不使用闭包）
    • 它包含很少使用this ( 493vs 4373in ace--)
    • 不使用模块，一切都在一个文件中，不像 ace 有 59 个模块
    • 它有更短的变量名

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

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

于 2013-05-25T14:01:06.733 回答
0

为什么不简单地使用 CodeMirror？这是优秀的恕我直言。

于 2013-05-24T18:27:46.137 回答