Ottimizzare (ridurre) i componenti per migliorare le prestazioni

Migliorare le prestazioni dei componenti e ridurre le dimensioni di download riducendo il codice JavaScript con Developer Cloud Service.

Ottimizzare i componenti

Un esempio di ottimizzazione del codice sorgente di componente (facoltativo) è fornito con il componente Sample-Text-With-Image. Per ridurre e combinare il codice sorgente è possibile utilizzare l'ottimizzatore RequireJS. La procedura di riduzione di un componente rimuove gli spazi indesiderati dal codice JavaScript, migliorando le prestazioni e riducendo la dimensione del download. L'ottimizzazione prevede le azioni seguenti:

  • Riduzione del codice JavaScript.

  • Compressione di CSS.

  • Combinazione di JavaScript, HTML e CSS in un unico file, render.js.

Questa ottimizzazione riduce la dimensione del download e migliora le prestazioni.

Abilitare l'ottimizzazione per il componente

Nel componente Sample-Text-With-Image l'ottimizzazione riduce e combina tutti i file contrassegnati come dipendenze in render.js (template.html, data-defaults.js e design.css) in render.js come singolo file. Seguono altri componenti che supportano già l'ottimizzazione: 

  • Sample-Folder-List

  • Sample-File-List

  • Sample-Documents-Manager

  • Sample-Process-Start-Form

  • Sample-Process-Task-List

  • Sample-Process-Task-Details

Per abilitare l'ottimizzazione per il componente locale, attenersi alla procedura obbligatoria riportata di seguito.

  1. Copiare gulpfile.js dal componente Sample-Text-With-Image al proprio componente.

  2. Correggere i nomi dei moduli in gulpfile.js per le proprie dipendenze render.js. Fare riferimento ai commenti in gulpfile.js.

Nota:

Se si dispone di un componente esistente, con una cartella css sotto assets, rinominare la cartella css in styles per evitare errori durante l'ottimizzazione.