Optimisation des composants (réduction) pour de meilleures performances

Améliorez les performances de vos composants et diminuez les tailles de téléchargement en réduisant le code JavaScript avec Developer Cloud Service.

Optimisation de vos composants

Un exemple d'optimisation du code source de composant (facultatif) est fourni pour le composant Sample-Text-With-Image. Vous pouvez vous servir de l'optimiseur RequireJS pour réduire et combiner le code source. La réduction d'un composant enlève l'espace indésirable dans le code JavaScript, ce qui augmente les performances et diminue la taille de téléchargement. L'optimisation implique les actions suivantes :

  • Réduire le code JavaScript.

  • Compresser le fichier CSS.

  • Combiner les fichiers JavaScript, HTML et CSS dans un unique fichier, render.js.

Cette optimisation réduit la taille de chargement et améliore les performances.

Activation de l'optimisation de votre composant

Dans le composant Sample-Text-With-Image, l'optimisation réduira et combinera tous les fichiers marqués comme des dépendances dans render.js (template.html, data-defaults.js et design.css) dans un fichier unique render.js. Autres composants prenant déjà en charge l'optimisation :

  • Sample-Folder-List

  • Sample-File-List

  • Sample-Documents-Manager

  • Sample-Process-Start-Form

  • Sample-Process-Task-List

  • Sample-Process-Task-Details

Afin d'activer l'optimisation pour votre composant local, effectuez les étapes suivantes (obligatoires) :

  1. Copiez le fichier gulpfile.js du composant Sample-Text-With-Image dans votre composant.

  2. Corrigez le nom des modules dans gulpfile.js pour vos dépendances render.js. Reportez-vous aux commentaires dans gulpfile.js.

Remarque :

Si vous disposez d'un composant existant, avec un dossier css sous assets, renommez le dossier css en styles pour éviter toute erreur lors de l'optimisation.