Compilatore di chiusura di Google con applicazioni jQuery

Question

Ho un sacco di tempo investito in jquery e una grande applicazione costruita con esso. Recentemente ho esaminato Google Closure Library, ma in questo momento ho trovato che non è quasi elegante come jQuery. Credo che possa avere delle potenzialità e la esamineremo di più, ma per ora intendo continuare a utilizzare jQuery come framework di base.

Tuttavia, sono estremamente impressionato con Google Closure Compiler. Mi piacerebbe iniziare a usarlo durante il processo di compilazione della mia applicazione. Sfortunatamente, non è esattamente chiaro quanto sarà facile utilizzarlo per progetti che non rispettano gli standard standard di Google Closure.

Esistono buone pratiche o buone risorse sullo sviluppo di progetti basati su jQuery e sull'utilizzo del compilatore Google Closure? Per esempio:

1. Ha senso per compilare jQuery e jQuery-ui con esso, o dovrei continuare indicando queste risorse su Google CDN? Sono sicuro che il mio jquery e jquery-ui saranno più piccoli dal momento che non uso tutte le funzionalità delle librerie, ma puntare a un CDN aumenta le possibilità che il file sia già nella cache di un visitatore.

2. La mia domanda è suddivisa in molti file, con un file per funzione. Mi piacerebbe combinarli in un ordine specifico e ridurli in un file per sezione sul mio sito. Mi piacerebbe automatizzare questo processo.

3. Attualmente il mio progetto ha un back-end Java ed è stato realizzato con Maven. Ha senso aggiungere Google Closure Compiler a questo processo di compilazione?

Fondamentalmente, sto cercando qualsiasi risorsa specifica per l'utilizzo di Google Closure Compiler con jQuery.

Answer 1

Il compilatore di chiusura di Google è jQuery o qualsiasi altro oggetto agnostico di libreria. Ha due tipi di ottimizzazioni -

• semplici
• avanzata

ho cercato di applicare ottimizzazioni avanzate, ma è gravemente rotto la mia domanda. Se fa lo stesso, puoi provare a correggere la tua applicazione o utilizzare l'ottimizzazione semplice. C'è stato un calo del 32% delle dimensioni con semplici ottimizzazioni e circa il 68% con ottimizzazioni avanzate, ma non ha funzionato comunque.

Spostare la concatenazione JS in modo automatico per il processo di compilazione è sicuramente la soluzione giusta. Vedi JavaScript dependency management.

jQuery è già fortemente ottimizzato per dimensioni in byte, quindi dubito che sarete in grado di spremere abbastanza succo utilizzando Google Closure Compiler, ma vale la pena provare se combinato con il vostro progetto.

Vedo Google Closure Library in una luce favorevole, ma non l'ho ancora usato, dato che sono fortemente investito in MooTools a questo punto. Guardando è API, sembra che abbia una copertura piuttosto ampia su ciò che ha da offrire oltre a manipolazioni DOM, manipolazione AJAX, gestione eventi ecc.

Answer 2

Credo che a partire da 1.4.2 (forse prima), jQuery è minimizzato utilizzando Google Closure Compiler per impostazione predefinita. Quindi è probabilmente meglio continuare a fare riferimento a jQuery/jQuery UI tramite la rete CDN di Google.Tuttavia, ci sono ancora benefici nell'integrare il compilatore Closure nel processo di compilazione per combinare e minimizzare i file JS. Vale a dire, richieste JS ridotte per caricamento della pagina e dati trasferiti più piccoli nella speranza di migliorare le prestazioni del carico della pagina lato client. Queste sono alcune delle sfide che abbiamo incontrato, mentre l'integrazione del compilatore di chiusura nel nostro processo di generazione:

1. comando compilazione Costruire - Avevamo bisogno di un mezzo di invocare il compilatore con tutti i parametri necessari in modo automatico durante la compilazione processi. Per noi, questo significava scrivere un'app console per costruire il comando. Se lo scripting della shell è disponibile nel tuo ambiente, questo potrebbe essere un vantaggio.

2. Gestione delle dipendenze - Il compilatore Closure ha la capacità di ordinare automaticamente l'ordine del JS combinato in modo tale da preservare le dipendenze. Per sfruttare questa funzione, i file JS devono essere annotati con goog.provide\goog.require per comunicare al compilatore quali sono le dipendenze (--manage_closure_dependencies). Il compilatore escluderà anche qualsiasi JS che non è richiesto (cioè non è referenziato tramite una dichiarazione goog.require) dal JS combinato. Qui ci sono alcune cose da guardare fuori per:

   • Se si desidera includere tutti voi file JS nella produzione combinata, assicurarsi di includere un file "manifestare" JS nella compilation che contiene solo goog.require dichiarazioni a ogni file da includere nello script combinato (ovvero nessuna dichiarazione goog.provide).
   • Se non si utilizza la libreria di chiusura, assicurarsi di compilarlo utilizzando SIMPLE_OPTIMIZATIONS o successivo. In caso contrario, il compilatore non rimuoverà le istruzioni goog.provide/goog.require. In alternativa, è possibile definire le proprie funzioni JS goog.provide/goog.require per evitare errori.
   • Verificare che ci siano no dipendenze cicliche o affrontarne le conseguenze.

3. Compilazione una versione di debug di script combinato - Se necessario, è possibile compilare una versione di debug di script in combinazione con il flag --formatting PRETTY_PRINT. Questo produrrà lo script equivalente formattato con spazi bianchi intatti per lo sviluppo/debug.

Anche se, la documentazione di chiusura compilatore può essere sparse, a volte, non ha abbastanza per iniziare per la maggior parte e continua a migliorare - in modo da controllare regolarmente gli aggiornamenti, non è proprio così;)

Spero che questo ti aiuti.

Answer 3

Tauren, è possibile verificare il codice utilizzando closure-compiler casa. Puoi importare la tua libreria JQuery o qualcos'altro e provarla. Se possibile, definisci il tuo codice JavaScript utilizzando la funzione anonima che evita i conflitti di denominazione. Utilizzare gli spazi dei nomi utilizzando la libreria Google fornire la funzione. Un'altra buona risorsa che può aiutarti è Google JavaScript Style Guide

Answer 4

jQuery non è compatibile (ancora) con il compilatore di chiusura in modalità avanzata. Sono d'accordo che sarebbe un'ottima cosa renderlo compatibile, perché la sua sintassi di concatenamento di metodi presta molto facilmente alla prototipazione della virtualizzazione per una velocità di esecuzione notevolmente migliorata.

Infatti, tra le popolari librerie JavaScript (diverse da Closure Library, ovvero), solo Dojo Toolkit è compatibile con la modalità di chiusura avanzata.

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']() anziché $(elem).width()

Questo funziona con ADVANCED_OPTIMIZATIONS, in modo che il compilatore di chiusura non refactoring metodi jQuery.

Answer 6

Using jQuery with closure compiler advanced mode

Answer 7

Ottenere jQuery per lavorare bene con la chiusura del compilatore/avanzato è stato difficile per me, ma dal momento che hai a che fare con più file credo che sia importante che si guarda in l'opzione di moduli qui:

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

ho scavato intorno per una buona documentazione sul web, ma c'è MOLTO MOLTO poco. Utilizzando un unico extern jQuery, sono stato in grado di compilare con precisione avanzato - con più file, ecc

@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 

descrizioni

--module_wrapper name:wrapper 

Questo ti permette di avvolgere i vostri script in una chiusura - dal momento che il compilatore di default li rimuoverà. Se stai usando "use strict" come sono, è 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

È possibile utilizzare kjscompiler: https://github.com/knyga/kjscompiler e specificare le librerie che ti piace come esterno. Non sarebbero minimizzati. Soluzione davvero bella.