jquery - node - npm install uglifyjs

Compilador de cierres de Google con aplicaciones jQuery

Question

He invertido mucho tiempo en jquery y una gran aplicación desarrollada con él. Recientemente, he estado revisando Google Closure Library , pero en este momento me pareció que no era tan elegante como jquery. Creo que puede tener cierto potencial y lo investigaré más, pero por ahora tengo la intención de seguir utilizando jQuery como mi marco base.

Sin embargo, estoy muy impresionado con Google Closure Compiler . Me encantaría comenzar a usarlo durante el proceso de compilación de mi aplicación. Desafortunadamente, no está del todo claro cuán fácil será usarlo para proyectos que no cumplan con los estándares estándar de Google Closure.

¿Existen mejores prácticas o buenos recursos para desarrollar proyectos basados ​​en jquery y utilizar el compilador de cierres de Google? Por ejemplo:

1. ¿Tiene sentido compilar jquery y jquery-ui con él, o debería continuar apuntando a estos recursos en google CDN? Estoy seguro de que mi jquery y jquery-ui serán más pequeños ya que no utilizo todas las características de las bibliotecas, pero señalar a un CDN aumenta las posibilidades de que el archivo ya esté en un caché de visitante.

2. Mi aplicación se divide en muchos archivos, con un archivo por función. Me gustaría combinarlos en un orden específico y minimizarlos en un archivo por sección en mi sitio. Me gustaría automatizar este proceso.

3. Actualmente mi proyecto tiene un backend java y está construido con Maven. ¿Tiene sentido agregar Google Closure Compiler a este proceso de compilación?

Básicamente, estoy buscando buenos recursos que sean específicos para usar Google Closure Compiler con jQuery.

Answer 1

Creo que a partir de 1.4.2 (quizás antes), jQuery se minimiza utilizando Google Closure Compiler de forma predeterminada. Por lo tanto, probablemente sea mejor seguir haciendo referencia a la interfaz de usuario de jQuery / jQuery a través del google CDN. Sin embargo, aún existen beneficios al integrar el compilador Closure en su proceso de compilación para combinar y minimizar sus archivos JS. A saber, se redujeron las solicitudes de JS por carga de página y se transfirieron datos más pequeños con la esperanza de mejorar el rendimiento de carga de la página secundaria del cliente. Estos son algunos de los desafíos que encontramos al integrar el compilador de cierre en nuestro proceso de compilación:

1. Construir el comando de compilación : necesitábamos un medio para invocar el compilador con todos los parámetros necesarios de forma automática durante el proceso de compilación. Para nosotros, esto significaba escribir una aplicación de consola para construir el comando. Si las secuencias de comandos shell están disponibles en su entorno, eso podría ser una ventaja.

2. Administrar dependencias : el compilador de Cierre tiene la capacidad de ordenar automáticamente el orden de los JS combinados de modo que se conserven las dependencias. Para aprovechar esta característica, los archivos JS deben anotarse con goog.provide/goog.require para indicar al compilador cuáles son las dependencias ( --manage_closure_dependencies ). El compilador también excluirá cualquier JS que no sea necesario (es decir, no se haga referencia a través de una declaración goog.require ) del JS combinado. Aquí hay algunas cosas para tener en cuenta:

   • Si desea incluir todos los archivos JS en el resultado combinado, asegúrese de incluir un archivo JS "manifiesto" en la compilación que solo contenga instrucciones goog.require para cada archivo que se incluirán en el guión combinado (es decir, sin declaraciones goog.provide )
   • Si no está utilizando la Biblioteca de SIMPLE_OPTIMIZATIONS , asegúrese de estar compilando usando SIMPLE_OPTIMIZATIONS o superior. De lo contrario, el compilador no eliminará las goog.provide/goog.require . Alternativamente, también puede definir sus propias goog.provide/goog.require JS para evitar errores.
   • Asegúrese de que no haya dependencias cíclicas, o enfrente las consecuencias.

3. Compilación de una versión de depuración de la secuencia de comandos combinada : si es necesario, puede compilar una versión de depuración de la secuencia de comandos combinada mediante el --formatting PRETTY_PRINT . Esto generará el script equivalente formateado con espacios en blanco intactos para desarrollo / depuración.

Aunque, la documentación del compilador de cierre puede ser escasa a veces, tiene suficiente para comenzar en su mayor parte y está mejorando continuamente; por lo tanto, verifique regularmente las actualizaciones, no solo SO;)

Espero que esto ayude.

Answer 2

Google Closure Compiler es jQuery o cualquier otra biblioteca independiente. Tiene dos tipos de optimizaciones:

• Sencillo
• Avanzado

Traté de aplicar optimizaciones avanzadas, pero se rompió severamente mi aplicación. Si hace lo mismo, puede intentar reparar su aplicación o utilizar una optimización simple. Hubo un descenso del 32% en el tamaño con optimizaciones simples, y alrededor del 68% con optimizaciones avanzadas, pero eso no funcionó de todos modos.

Mover la concatenación de JS de forma automatizada a su proceso de compilación es definitivamente el camino a seguir. Ver administración de dependencias de JavaScript .

jQuery ya está muy optimizado para el tamaño de byte, por lo que dudo que pueda exprimir suficiente jugo utilizando Google Closure Compiler, pero vale la pena intentarlo cuando se combina con su proyecto.

Veo la biblioteca de Google Closure en una luz favorable, pero no he llegado a usarla, ya que estoy muy interesado en MooTools en este momento. En cuanto a su API , parece que tiene una cobertura bastante amplia sobre lo que tiene que ofrecer además de manipulaciones de DOM, manejo de AJAX, manejo de eventos, etc.

Answer 3

Hacer que jQuery funcione bien con el compilador / avanzado de cierre ha sido difícil para mí, pero dado que se trata de varios archivos, creo que es importante que analice la opción de módulos aquí:

Usando la opción --module en Closure Compiler para crear múltiples archivos de salida

He estado hurgando para obtener buena documentación en la web, pero hay MUY muy poco. Al usar un extern de jQuery, pude compilar con fine avanzado, con múltiples archivos, etc.

@echo off
java -jar bin/compiler.jar ^
    --compilation_level=ADVANCED_OPTIMIZATIONS ^
    --externs "externs/jquery-1.8.js" ^
    --language_in=ECMASCRIPT5_STRICT ^
    --warning_level=VERBOSE ^
    --module_output_path_prefix ./compiled/ ^
    ^
    --module_wrapper core:"(function(){%%s%%})();" ^
    --js "./corelib.js" ^
    --module core:1 ^
    ^
    --module_wrapper somescript"(function(){%%s%%})();" ^
    --js "./some_other_runtime_loaded_script" ^
    --module somescript:1:core ^
    ^
    --module_wrapper somescript1:"(function(){%%s%%})();" ^
    --js "./some_other_runtime_loaded_script" ^
    --module somescript1:1:core

descripciones

--module_wrapper name:wrapper

Esto le permite ajustar sus scripts en un cierre, ya que el compilador los eliminará de manera predeterminada. Si usa "use strict" como yo, eso es un no no.

--module name:#:dependency

name       Name of the script that will get written
#          number of scripts above that line to include into this script
dependency What script does this depend on?

Answer 4

Puede usar kjscompiler: https://github.com/knyga/kjscompiler y especificar las bibliotecas que desee como externas. No serían minificados. Muy buena solución.

Answer 5

Tauren, puedes probar tu código usando closure-compiler . Puede importar su biblioteca JQuery u otra cosa y probarlo. Si es posible, defina su código JavaScript utilizando la función anónima que evita nombrar conflictos. Use espacios de nombres mediante el uso de la función de biblioteca de Google. Otro buen recurso que puede ayudar es Google JavaScript Style Guide

Answer 6

jQuery no es compatible (todavía) con el compilador de cierre en modo avanzado. Estoy de acuerdo en que sería algo muy bueno hacer que sea compatible, porque su sintaxis de encadenamiento de métodos se presta muy rápidamente para prototipar la virtualización con una velocidad de ejecución mucho mejor.

De hecho, entre las populares bibliotecas de JavaScript (distintas de Closure Library), solo Dojo Toolkit es compatible con el modo Closure Advanced.

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

Answer 7

$(elem)[''width'']() lugar de $(elem).width()

Esto funciona con ADVANCED_OPTIMIZATIONS, por lo que el compilador de cierre no refactoriza los métodos jQuery.

Answer 8

Uso de jQuery con el modo avanzado de compilador de cierre