Σμίκρυνση και ομαδοποίηση στο SharePoint Online

Αυτό το άρθρο περιγράφει τον τρόπο χρήσης τεχνικών σμίκρυνσης και ομαδοποίησης με το Web Essentials προκειμένου να μειώσετε τον αριθμό των αιτήσεων HTTP και να μειώσετε το χρόνο που απαιτείται για τη φόρτωση σελίδων στο SharePoint Online.

Κατά την προσαρμογή της τοποθεσίας web σας ενδέχεται να καταλήξετε να έχετε προσθέσει μεγάλο αριθμό επιπλέον αρχείων στο διακομιστή για την υποστήριξη της προσαρμογής. Η προσθήκη επιπλέον JavaScript, CSS και εικόνων αυξάνει τον αριθμό των αιτήσεων HTTP στο διακομιστή, το οποίο με τη σειρά του αυξάνει το χρόνο που χρειάζεται για να εμφανιστεί μια ιστοσελίδα. Εάν έχετε πολλά αρχεία του ίδιου τύπου, μπορείτε να ομαδοποιήσετε αυτά τα αρχεία για να κάνετε ταχύτερη τη λήψη τους.

Για αρχεία JavaScript και CSS, μπορείτε επίσης να χρησιμοποιήσετε μια προσέγγιση που ονομάζεται σμίκρυνση, με την οποία μπορείτε να μειώσετε το συνολικό μέγεθος των αρχείων, καταργώντας τα κενά διαστήματα και άλλους χαρακτήρες που δεν είναι απαραίτητοι.

Σμίκρυνση και ομαδοποίηση αρχείων JavaScript και CSS με το Web Essentials

Μπορείτε να χρησιμοποιήσετε λογισμικό τρίτων κατασκευαστών όπως το Web Essentials για να ομαδοποιήσετε αρχεία CSS και JavaScript.

ΣΗΜΑΝΤΙΚΟ: Το Web Essentials είναι ένα έργο τρίτων, ανοιχτού κώδικα, που βασίζεται στην κοινότητα των χρηστών. Το λογισμικό είναι μια επέκταση του Visual Studio 2012 και του Visual Studio 2013 και δεν υποστηρίζεται από τη Microsoft. Για να κάνετε λήψη του Web Essentials, επισκεφθείτε την τοποθεσία Web http://vswebessentials.com/download.

Το Web Essentials παρέχει δύο μορφές ομαδοποίησης:

  • .bundle: για αρχεία CSS και JavaScript

  • .sprite: για εικόνες (διαθέσιμο μόνο στο Visual Studio 2013)

Μπορείτε να χρησιμοποιήσετε το Web Essentials εφόσον έχετε μια υπάρχουσα δυνατότητα με ορισμένα στοιχεία εμπορικής προσαρμογής στα οποία γίνεται αναφορά μέσα σε μια προσαρμοσμένη κύρια σελίδα, όπως:

Στιγμιότυπο οθόνης του στοιχείου εμπορικής επωνυμίας στην προσαρμοσμένη κύρια σελίδα

Για να δημιουργήσετε ένα πακέτο TE000127218 και CSS στο Web Essentials

  1. Στο Visual Studio, στην Εξερεύνηση λύσεων, επιλέξτε τα αρχεία που θέλετε να συμπεριλάβετε στο πακέτο.

  2. Κάντε δεξί κλικ στα επιλεγμένα αρχεία και, στη συνέχεια, επιλέξτε Web Essentials > Δημιουργία αρχείου πακέτου JavaScript από το μενού περιβάλλοντος. Για παράδειγμα:

    Στιγμιότυπο οθόνης που εμφανίζει επιλογές του μενού Web Essentials

Προβολή αποτελεσμάτων πακέτου αρχείων JavaScript και CSS

Όταν δημιουργείτε ένα πακέτο JavaScript και CSS, το Web Essentials δημιουργεί ένα αρχείο XML που ονομάζεται αρχείο συνταγής, το οποίο προσδιορίζει τα αρχεία JavaScript και CSS καθώς και ορισμένες άλλες πληροφορίες ρύθμισης παραμέτρων:

Στιγμιότυπο οθόνης του αρχείου συνταγής JavaScript και CSS

Επιπλέον, εάν η σημαία σμίκρυνσης τεθεί στην τιμή true στη συνταγή ομαδοποίησης, τα αρχεία μειώνονται σε μέγεθος αλλά και ομαδοποιούνται. Αυτό σημαίνει ότι δημιουργήθηκαν νέες μικρότερες εκδόσεις των αρχείων JavaScript στις οποίες μπορείτε να κάνετε αναφορές στην κύρια σελίδα σας.

Στιγμιότυπο οθόνης της σημαίας μείωσης σπουδαιότητας με τιμή True

Κατά τη φόρτωση μιας σελίδας από την τοποθεσία web σας, μπορείτε να χρησιμοποιήσετε τα εργαλεία προγραμματιστή από το πρόγραμμα περιήγησης web, όπως τον Internet Explorer 11, για να δείτε τον αριθμό των αιτήσεων που στάλθηκαν στο διακομιστή και το χρόνο που απαιτήθηκε για τη φόρτωση κάθε αρχείου.

Η ακόλουθη εικόνα δείχνει το αποτέλεσμα της φόρτωσης των αρχείων JavaScript και CSS πριν από τη σμίκρυνση.

Στιγμιότυπο οθόνης που εμφανίζει τη λήψη 80 στοιχείων

Μετά την ομαδοποίηση των αρχείων CSS και JavaScript, ο αριθμός των αιτήσεων μειώθηκε στις 74 και κάθε επιμέρους αρχείο χρειάστηκε μόνο λίγο περισσότερο χρόνο για τη λήψη του σε σχέση με τα αρχικά αρχεία:

Στιγμιότυπο οθόνης που εμφανίζει τη λήψη 74 στοιχείων

Μετά την ομαδοποίηση, το αρχείο πακέτου JavaScript μειώθηκε σημαντικά από τα 815KB στα 365KB:

Στιγμιότυπο οθόνης που εμφανίζει μειωμένο μέγεθος λήψης

Ομαδοποίηση εικόνων μέσω της δημιουργίας ενός sprite εικόνας

Παρόμοια με τον τρόπο που ομαδοποιείτε αρχεία JavaScript και CSS, μπορείτε να συνδυάσετε πολλά μικρά εικονίδια και άλλες κοινές εικόνες σε ένα μεγαλύτερο φύλλο sprite και, στη συνέχεια, να χρησιμοποιήσετε CSS για να εμφανίσετε τις μεμονωμένες εικόνες. Αντί για τη λήψη κάθε εικόνας μεμονωμένα, το πρόγραμμα περιήγησης web του χρήστη πραγματοποιεί λήψη του φύλλου sprite μία φορά και, στη συνέχεια, το αποθηκεύει στο cache του τοπικού υπολογιστή. Αυτό βελτιώνει τις επιδόσεις στη φόρτωση σελίδων μειώνοντας τον αριθμό των λήψεων και των αμφίδρομων μεταβάσεων στο διακομιστή web.

Για να δημιουργήσετε ένα sprite εικόνας στο Web Essentials

  1. Στο Visual Studio, στην Εξερεύνηση λύσεων, επιλέξτε τα αρχεία που θέλετε να συμπεριλάβετε στο πακέτο.

  2. Κάντε δεξί κλικ στα επιλεγμένα αρχεία και, στη συνέχεια, επιλέξτε Web Essentials > Δημιουργία sprite εικόνας από το μενού περιβάλλοντος. Για παράδειγμα:

    Στιγμιότυπο οθόνης που εμφανίζει τον τρόπο δημιουργίας ενός sprite εικόνας
  3. Επιλέξτε μια θέση για την αποθήκευση του αρχείου sprite. Το αρχείο .sprite είναι ένα αρχείο XML που περιγράφει τις ρυθμίσεις και τα αρχεία του sprite. Οι παρακάτω εικόνες δείχνουν ένα παράδειγμα αρχείου sprite PNG και το αντίστοιχο αρχείο .sprite XML.

    Στιγμιότυπο οθόνης ενός αρχείου sprite

    Στιγμιότυπο οθόνης του αρχείου sprite XML

Αναπτύξτε τις δεξιότητές σας
Εξερευνήστε το περιεχόμενο της εκπαίδευσης
Αποκτήστε πρώτοι τις νέες δυνατότητες
Γίνετε μέλος του Office Insider

Σας βοήθησαν αυτές οι πληροφορίες;

Σας ευχαριστούμε για τα σχόλιά σας!

Σας ευχαριστούμε για τα σχόλιά σας! Φαίνεται ότι μπορεί να είναι χρήσιμο να συνδεθείτε με έναν από τους συνεργάτες υποστήριξης του Office.

×