Google Closure Compiler con aplicaciones jQuery

Question

Tengo mucho tiempo invertido en jquery y en 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 en el desarrollo de proyectos basados ​​en jquery y el uso del compilador de cierres de Google? Por ejemplo:

1. ¿Tiene sentido para compilar jQuery y jQuery-UI con ella, o debería seguir apuntando a estos recursos en el CDN de Google? 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 back-end Java y está construido con Maven. ¿Tiene sentido agregar Google Closure Compiler a este proceso de compilación?

Básicamente, estoy buscando cualquier buenos recursos que son específicos a través de Google Closure Compiler con jQuery.

Answer 1

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

• simples
• avanzada

intenté aplicar optimizaciones avanzadas, pero se rompió gravemente mi solicitud. 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 automática a su proceso de construcción es definitivamente el camino a seguir. Ver JavaScript dependency management.

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

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

Answer 2

Creo que a partir de 1.4.2 (quizás antes), jQuery está minificado 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 retos que nos encontramos mientras que la integración del compilador de cierre en nuestro proceso de construcción:

1. La construcción de comando de compilación - Necesitábamos un medio de invocar el compilador con todos los parámetros necesarios de una manera automática durante la construcción proceso. 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 a tener en cuenta:

   • Si desea incluir todos ustedes archivos JS en la salida combinada, asegúrese de que incluye un archivo "manifestar" JS en la compilación que sólo contiene goog.require declaraciones de cada archivo que se incluirá script combinado (es decir, no hay declaraciones goog.provide).
   • Si no está utilizando la Biblioteca de cierres, asegúrese de estar compilando usando SIMPLE_OPTIMIZATIONS o superior. De lo contrario, el compilador no eliminará las declaraciones goog.provide/goog.require. Alternativamente, también puede definir sus propias funciones JS goog.provide/goog.require para evitar errores.
   • Asegúrese de que no dependencias cíclicas, o enfrentar las consecuencias.

3. La compilación de una versión de depuración de la escritura combinada - Si es necesario, puede compilar una versión de depuración de la escritura combinada usando la bandera --formatting PRETTY_PRINT. Esto generará el script equivalente formateado con espacios en blanco intactos para desarrollo/depuración.

Aunque, la documentación de cierre del compilador puede ser escasa, a veces, no tienen suficiente para empezar a trabajar en su mayor parte y mejora constantemente - a fin de comprobar periódicamente las actualizaciones, no sólo SO;)

Espero que esto ayude.

Answer 3

Tauren, puedes probar tu código usando closure-compiler en casa. 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 los espacios de nombres utilizando la biblioteca de Google para proporcionar la función. Otro buen recurso que puede ayudarlo es Google JavaScript Style Guide

Answer 4

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 (que no son la Biblioteca de cierres, es decir), solo Dojo Toolkit es compatible con el modo avanzado de cierre.

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

Answer 5

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

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

Answer 6

Using jQuery with closure compiler advanced mode

Answer 7

conseguir jQuery para trabajar bien con el cierre del compilador/avanzado ha sido difícil para mí, pero ya que usted está tratando con varios archivos creo que es importante que usted mira en la opción de módulos aquí:

Using the --module option in Closure Compiler to create multiple output files

que he estado cavando alrededor de una buena documentación en la web, pero hay muy muy poco. Mediante el uso de un solo extern jQuery, yo era capaz de compilar con bien avanzada - 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 envolver las secuencias de comandos en un cierre - dado que el compilador por defecto los eliminará. 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 8

Es posible utilizar kjscompiler: https://github.com/knyga/kjscompiler y especificar las bibliotecas corrientes como externo. No serían minificados. Muy buena solución.