¿Puede un minificador hacer esto? (.... y ¿es una buena idea?)

Question

Tengo una aplicación JavaScript que genera una cantidad significativa de elementos DOM. Significa que a menudo uso document.createElement("tagname") en mi script.

estoy pensando en el uso de esta función simple:

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

Me gustaría mantener mi código escrito en JavaScript (o tal vez coffeescript), y utilizar el método document.createElement completa en el código para facilitar la lectura. Pero esperaría que cuando "compile" o minimice el código, todas las instancias de document.createElement se reemplacen con la función c.

Haría lo mismo para otros métodos: document.getElementById, etc. Espero que pueda acortar mi código de 10 a 20% con esta técnica.

¿Hay minificadores o compiladores que pueden hacer esto? ¿Y tiene sentido en primer lugar?

Answer 1

no creo que te ganará tanto. El archivo js descomprimido puede ser bastante más pequeño, pero la compresión debería tratarse con una cadena tan repetitiva. Así que espero que la ganancia en un archivo javascript comprimido (compresión http gzip) sea bastante pequeña.

Answer 2

La mayoría de los minificadores no redefinirán las funciones de la biblioteca DOM con versiones más cortas. Sin embargo, verá este patrón hecho a mano en muchas bibliotecas para reducir y/o simplificar el código. Entonces, no hay nada de malo en hacer esto usted mismo. Sólo asegúrese de que usted lo hace dentro de un cierre ....

Tome un vistazo a las opciones para uglifier y ver lo que puede hacer por usted, por ejemplo:

{ 
    :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 
    } 
} 

Answer 3

tiene sentido, sino una Minifier que lo hace automáticamente tiene que ser inteligentes acerca de algunas cosas:

1. ¿La parte del código que se factoriza a cabo en una nueva repetición de la función de las veces suficientes para hacer de este refactorizar más económico?
2. Rendimiento potencial del código de ajuste dentro de funciones adicionales: especialmente cuando se usa con mucha frecuencia en un escenario de tiempo crítico (un generador de perfiles puede decir esto, un minificador probablemente no pueda). Tal vez el minificador puede poner un límite al número de reemplazos en las llamadas a función profundamente anidadas, etc.

Probablemente será mejor que lo haga manualmente.

Answer 4

Todo depende del minificador. La mayoría no hace esto. Por ejemplo el código:

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

En el modo avanzado Google Closure Compiler:

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

en el compresor YUI:

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

En jscompress.com:

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

Imagino que los compiladores son reacios a métodos DOM alias en caso de efectos secundarios extraños, y también las cadenas repetidas en el js a comprimirse bien por gzip de todos modos.

Answer 5

Acabo de llamar a la función create(e) en lugar de c(e). De esta forma, obtienes lo mejor de ambos mundos, legibilidad y no tienes que escribir demasiado.