Βελτιστοποίηση συστατικών στοιχείων (Minify) για καλύτερη απόδοση

Βελτιώστε την απόδοση των συστατικών στοιχείων σας και μειώστε τα μεγέθη λήψης βελτιστοποιώντας (minify) τον κώδικα JavaScript με την υπηρεσία Developer Cloud Service.

Βελτιστοποίηση των συστατικών στοιχείων σας

Ένα παράδειγμα βελτιστοποίησης του πηγαίου κώδικα συστατικών στοιχείων (προαιρετικό) παρέχεται για το συστατικό στοιχείο Δείγμα-κειμένου-με-εικόνα. Μπορείτε να χρησιμοποιήσετε τη λειτουργία βελτιστοποίησης RequireJS για τη βελτιστοποίηση (minify) και τον συνδυασμό πηγαίου κώδικα. Η βελτιστοποίηση (minify) ενός συστατικού στοιχείου αφαιρεί τον ανεπιθύμητο χώρο στον κώδικα JavaScript, με αποτέλεσμα καλύτερη απόδοση και μικρότερα μεγέθη λήψης. Η βελτιστοποίηση περιλαμβάνει τις ακόλουθες ενέργειες:

  • Βελτιστοποίηση (minify) του κώδικα JavaScript.

  • Συμπίεση του CSS.

  • Συνδυασμός JavaScript, HTML και CSS σε ένα μοναδικό αρχείο, render.js.

Αυτή η βελτιστοποίηση μειώνει το μέγεθος λήψης και βελτιώνει την απόδοση.

Ενεργοποίηση βελτιστοποίησης για το συστατικό στοιχείο σας

Στο συστατικό στοιχείο Δείγμα-κειμένου-με-εικόνα, η βελτιστοποίηση θα ελαχιστοποιήσει (minify) και θα συνδυάσει όλα τα αρχεία που έχουν σημειωθεί ως εξαρτήσεις στο αρχείο render.js (template.html, data-defaults.js και design.css) στο αρχείο render.js ως ένα μοναδικό αρχείο. Άλλα συστατικά στοιχεία που υποστηρίζουν ήδη τη βελτιστοποίηση είναι τα εξής: 

  • Δείγμα-Λίστα-Φακέλων

  • Δείγμα-Λίστα-Αρχείων

  • Δείγμα-Διαχείριση-Εγγράφων

  • Δείγμα-Φόρμα-Έναρξης-Διαδικασίας

  • Δείγμα-Λίστα-Εργασιών-Διαδικασίας

  • Δείγμα-Λεπτομέρειες-Εργασιών-Διαδικασίας

Για να ενεργοποιήσετε τη βελτιστοποίηση για το τοπικό συστατικό στοιχείο σας, εκτελέστε τα ακόλουθα βήματα (απαιτούνται):

  1. Αντιγράψτε το αρχείο gulpfile.js από το συστατικό στοιχείο Δείγμα κειμένου-με-εικόνα στο δικό σας συστατικό στοιχείο.

  2. Διορθώστε τα ονόματα λειτουργικών μονάδων στο αρχείο gulpfile.js για τις εξαρτήσεις σας render.js. Ανατρέξτε στα σχόλια στο αρχείο gulpfile.js.

Σημείωση:

Αν έχετε ένα υπάρχον συστατικό στοιχείο, με έναν φάκελο css κάτω από το στοιχείο assets, μετονομάστε τον φάκελο css σε styles για να αποφύγετε σφάλματα κατά τη βελτιστοποίηση.