Questa è una vecchia versione del documento!
Minificazione Risorse
Nell'ambito della issue #1404, rilasciata nella versione 4.7.2, è stato introdotto un nuovo meccanismo di minificazione delle risorse javascript e CSS. Questo ha permesso di dare un boost alla velocità di apertura del progetto/funzioone.
Procedura precedente
Precedentemente all'intervento la minificazione delle risorse aveva questi vincoli:
- per il codice di geoweb, venivano minificati solo i file .js (e non i .css) e SOLO dei seguenti moduli principali:
- gw-commons-web (transfer-objects, pre 4.6.*)
- gw-webclient (webclient, pre 4.6.*)
- gw-webadmin (webadmin, pre 4.6.*)
- per la minificazione, veniva utilizzato il tool di build, rilasciata con lo stesso dojo, che era configurato per:
- generare un unico file compresso con le librerie dojo utilizzate (da esplicitare preventivamente in un file di build)
- generare un unico file compresso con le librerie customDojo, sviluppate ad hoc per geoweb (che per convenzione venivano tutti messi dentro gw-commons-web)
- minificare tutte le risorse sotto la folder debug/js, senza concatenarle, e posizionarle sotto la folder compressed/js
- i file minificati erano generati prima di rilasciare una versione di geoweb lanciando le varie procedure configurate in eclipse (Webclient Dojo Builder, etc.., come da pagina dedicata nella wiki)
- la scelta del path dove cercare le risorse veniva fatta dimanicamente in base al flag useCompressed del configuration.properties
- le risorse necessarie epr la minificaizone di dojo pesano cica 10 MB e andavano tenute in copie multiple per ogni plugin sul quale si voleva implementare una procedura di minificazione
- gli altri plugin di geoweb tendenzialmente non avevano procedure di minificazione, e caricavano le risorse sempre dalla folder debug/js
- le librerie esterne (.js e .css) in genere venivano incluse gia minificate
- ogni plugin del framework specificava nell'initializer java quali risorse css e js avessero dovute essere caricate in automatico all'avvio del progetto
- altre volte la singola scheda caricava alla sua apertura (e non all'avvio del progetto), le risorse esclusive di cui necessitava
Da tutti questi vincoli risulta che ci fossero enormi margini di ottimizzazione, in quanto:
- le risorse erano frammentate in moltissimi file (circa 200 file in progetti con molti plugin)
- le risorse tirate giù dal browser nel loro complesso pesavano più di 10 MB
Nuova procedura: Grunt
Si è scelto di introdurre nel codice uno strumento dedicato: Grunt. Caratteristiche:
- permette di minificare facilmente sia risorse .js che .css
- permette di concatenare risorse in un'unico file
- permette di configurare una pipeline di build personalizzata
Modalità di utilizzo
Grunt è stato configurato per tutti i moduli attualmente presenti sotto il repo geowebframeowrk.
La configurazione ha lo scopo di accorpare risorse, minificandole, e produrre per ogni modulo un numero standard di file: 4. La separazione fra .js e .css è imposta. Si è scelto poi di separare i file prodotti da geoweb da quelli derivanti da librerie esterne. Inoltre, data la natura modulare del framework, questo schema è replicato per ogni modulo (plugin).
Quindi, per ogni modulo vengono generati i seguenti:
- [nome-modulo].min.js
- [nome-modulo].min.css
- [nome-modulo]-externals.min.js
- [nome-modulo]-externals.min.css
Per esempio:
- gw-webclient.min.js
- gw-webclient-externals.min.css
- gw-webclient.min.js
- gw-webclient-externals.min.css
I file -externals inglobano tutte le librerie esterne, non codice di geoweb, in un'unico file.
Vecchi meccanismi generali mantenuti
- la build dei file dojo/customDojo è stata mantenuta come prima, gestita dal tool dojo, ma è rimasta solo nel plugin gw-commons-web (non c'è più ne per il webclient ne per il webadmin).
- l'utilizzo di risorse compresse si abilita sempre del flag useCompressed nel configuration.properties
- ogni plugin dichiara nel suo initializer quali risorse vanno caricate all'inizio (compresse o meno che siano)
Nuovi Meccanismi introdotti
- essendo Grunt basato su Node, sotto la folder principale geowebframework c'è ora una cartella comune node_modules, che contiene tutte le dipendenze utilizzate per i vari build
- c'è inoltre il file package.json e relativo package-lock.json, che specifica le varie dipendenze
- ogni modulo ha un suo file di configurazione della minificazione GruntFile.js sotto static-resources (Es: /gw-webclient/src/main/resources/META-INF/static-resources/Gruntfile.js). Questo file va configurato seguendo le specifiche esigenze del modulo da minificare. Non ci sono regole ferree, ma buone linee guida
- ogni configurazione esporta i 4 file minificati nella nuova folder /build, sotto le risorse statiche (solo gw-commons-web mantiene anche compressed per le risorse dojo/customDojo)
- la procedura di build di ogni modulo può essere lanciata singolarmente, posizionando cmd sulla folder del modulo e lanciando il comando npm run build
- Al fine di lanciarle tutte insieme, nel file package.json, c'è specificato in scripts di utilizzare npm-run-all per buildare in parallelo, tutti i vari GruntFile.js dei vari moduli (che vanno quindi esplicitamente censiti)
{
"devDependencies": {
"grunt": "^1.6.1",
"grunt-contrib-clean": "^2.0.1",
"grunt-contrib-concat": "^2.1.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^5.0.0",
"grunt-contrib-uglify": "^5.2.2",
"grunt-terser": "^2.0.0",
"npm-run-all": "^4.1.5"
},
"scripts": {
"build": "npm-run-all --parallel build:gw-webclient build:gw-commons-web build:gw-advanced build:gw-workflow build:gw-3d-visualizer build:gw-approvals build:gw-cde build:gw-cms build:gw-furnitures build:gw-google-street-view build:gw-mnemonic-code build:gw-print-map-legend build:gw-scenarios build:gw-thematism build:gw-webadmin",
"build:gw-webclient": "grunt --gruntfile ./gw-webclient/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-webadmin": "grunt --gruntfile ./gw-webadmin/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-commons-web": "grunt --gruntfile ./gw-commons-web/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-advanced": "grunt --gruntfile ./gw-advanced/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-workflow": "grunt --gruntfile ./gw-workflow/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-3d-visualizer": "grunt --gruntfile ./gw-3d-visualizer/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-approvals": "grunt --gruntfile ./gw-approvals/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-cde": "grunt --gruntfile ./gw-cde/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-cms": "grunt --gruntfile ./gw-cms/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-furnitures": "grunt --gruntfile ./gw-furnitures/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-google-street-view": "grunt --gruntfile ./gw-google-street-view/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-mnemonic-code": "grunt --gruntfile ./gw-mnemonic-code/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-print-map-legend": "grunt --gruntfile ./gw-print-map-legend/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-scenarios": "grunt --gruntfile ./gw-scenarios/src/main/resources/META-INF/static-resources/Gruntfile.js",
"build:gw-thematism": "grunt --gruntfile ./gw-thematism/src/main/resources/META-INF/static-resources/Gruntfile.js"
}
}
Eclispe New External Tools Configuration
Analogamente a quanto era stato fatto per le build dojo, ogni sviluppatore deve creare una nuova procedura di build.
Run > External Tools > External Tools Condifurations..
Nel dialog che si apre RClick su Program e click su New Configuration... Impostare questa configurazione
Name: grunt-build
Location: C:\nodejs\npm.cmd
Working directory: ${workspace_loc:\geowebframework\}
Arguments: run build
Alla fine click su Apply ed opzionalmente Run.