Может ли минификатор сделать это?(.... и это хорошая идея?)

Question

У меня есть приложение JavaScript, которое генерирует значительное количество элементов DOM.Это означает, что я часто использую document.createElement("tagname") в своем скрипте.

Я думаю об использовании этой простой функции:

function c(e) {return document.createElement(e);}

Я бы продолжал писать свой код на JavaScript (или, возможно, CoffeScript)и используйте полный метод document.createElement в коде для удобства чтения.Но я ожидаю, что когда я «скомпилирую» или сверну код, все экземпляры document.createElement будут заменены функцией c.

Я бы сделал то же самое для других методов: document.getElementById,и т. д. Я надеюсь, что с помощью этого метода я смогу сократить свой код на 10–20%.

Существуют ли минификаторы или компиляторы, которые могут это сделать?И имеет ли это смысл в первую очередь?

Answer 1

Не думаю, что это принесет вам такую ​​большую пользу.Несжатый JS-файл может быть немного меньше, но сжатие должно работать с такой повторяющейся строкой.Поэтому я ожидаю, что выигрыш от сжатого (сжатие http gzip) файла javascript будет довольно небольшим.

Answer 2

Я просто вызываю функцию create(e) вместо c(e).Таким образом, вы получаете лучшее из обоих миров, удобство чтения и вам не нужно много печатать.

Answer 3

Это полностью зависит от минификатора. Большинство этого не делают. Например, код:

window['a'] = document.createElement('div');
window['b'] = document.createElement('div');
window['c'] = document.createElement('div');

В расширенном режиме компилятора Google Closure:

window.a=document.createElement("div");window.b=document.createElement("div");window.c=document.createElement("div");

В YUI Compressor:

window.a=document.createElement("div");window.b=document.createElement("div");window.c=document.createElement("div");

На jscompress.com:

window["a"]=document.createElement("div");window["b"]=document.createElement("div");window["c"]=document.createElement("div")

Я предполагаю, что компиляторы неохотно используют псевдонимные методы DOM в случае странных побочных эффектов, а также повторяющиеся строки в js будут хорошо сжиматься gzip в любом случае.

Answer 4

Это имеет смысл, но минимизатор, который делает это автоматически, должен быть умным в отношении нескольких вещей:

1. Повторяется ли часть кода, которая выделена в новую функцию, достаточно много раз, чтобысделать этот рефакторинг более экономичным?
2. Потенциальное снижение производительности из-за оборачивания кода в дополнительные функции: особенно когда это код, который очень часто используется в критически важном сценарии (профилировщик может сказать это, минификатор, вероятно, не может),Возможно, минификатор может ограничить число замен в глубоко вложенных вызовах функций и т. Д.

Возможно, вам лучше сделать это вручную.

Answer 5

Большинство минификаторов не будут переопределять функции библиотеки DOM с более короткими версиями. Однако вы видите, что этот шаблон делается вручную во многих библиотеках, чтобы уменьшить и / или упростить код. Так что нет ничего плохого в том, чтобы сделать это самостоятельно. Просто убедитесь, что вы делаете это в закрытии ....

Посмотрите на опции для uglifier и посмотрите, что он может сделать для вас, например:

{
  :mangle => true, # Mangle variables names
  :toplevel => false, # Mangle top-level variable names
  :except => [], # Variable names to be excluded from mangling
  :max_line_length => 32 * 1024, # Maximum line length
  :squeeze => true, # Squeeze code resulting in smaller, but less-readable code
  :seqs => true, # Reduce consecutive statements in blocks into single statement
  :dead_code => true, # Remove dead code (e.g. after return)
  :lift_vars => false, # Lift all var declarations at the start of the scope
  :unsafe => false, # Optimizations known to be unsafe in some situations
  :copyright => true, # Show copyright message
  :ascii_only => false, # Encode non-ASCII characters as Unicode code points
  :inline_script => false, # Escape </script
  :quote_keys => false, # Quote keys in object literals
  :beautify => false, # Ouput indented code
  :beautify_options => {
    :indent_level => 4,
    :indent_start => 0,
    :space_colon => false
  }
}