απαιτήσεις: Σε προηγούμενα έργα .NET Framework MVC, το JS, το CSS μπορούν να ομαδοποιηθούν και να συμπιεστούν χρησιμοποιώντας τη βιβλιοθήκη Microsoft.AspNet.Web.Optimization της Microsoft. Μετά τη χρήση του ASP.NET Core, πώς μπορώ να ομαδοποιήσω και να συμπιέσω υπάρχοντα αρχεία JS και CSS;
Το έργο .NET Framework αναφέρει τα ακόλουθα:
Δείγμα κώδικα:
δεσμευτικός
Η ομαδοποίηση συνδυάζει πολλά αρχεία σε ένα μόνο αρχείο. Η ομαδοποίηση μειώνει τον αριθμό των αιτημάτων διακομιστή που απαιτούνται για την απόδοση ενός στοιχείου ιστού, όπως μια ιστοσελίδα. Μπορείτε να δημιουργήσετε όσα μεμονωμένα πακέτα θέλετε ειδικά για CSS, JavaScript και άλλα. Λιγότερα αρχεία σημαίνουν από το πρόγραμμα περιήγησης στον διακομιστή ή από την υπηρεσία που παρέχει την εφαρμογήΛιγότερα αιτήματα HTTP。 Αυτό βελτιώνει την απόδοση φόρτωσης της αρχικής σελίδας.
κομπρέσα
Ελαχιστοποιήστε την αφαίρεση περιττών χαρακτήρων από τον κώδικά σας χωρίς να αλλάξετε τη λειτουργικότητα. Το αποτέλεσμα ήτανΤο μέγεθος των ζητούμενων πόρων, όπως CSS, εικόνες και αρχεία JavaScript, μειώνεται σημαντικά。 Οι συνήθεις παρενέργειες της ελαχιστοποίησης περιλαμβάνουν τη συντόμευση των ονομάτων μεταβλητών σε έναν χαρακτήρα και την αφαίρεση σχολίων και περιττών διαστημάτων. Ταυτόχρονα, μπορεί ναΜπερδέψτε τον κώδικα, κάτι που δεν ευνοεί άλλους ανταγωνιστές να διαβάσουν τον πηγαίο μας κώδικα.
Κέρδη απόδοσης από τη ομαδοποίηση και τη συμπίεση
Ο παρακάτω πίνακας περιγράφει τις διαφορές μεταξύ της φόρτωσης των πάγιων στοιχείων μεμονωμένα και της χρήσης ομαδοποίησης και ελαχιστοποίησης:
Εξοικονομεί κίνηση και βελτιώνει την ταχύτητα φόρτωσης όσον αφορά τη μεταφορά δικτύου, ενώ παράλληλα μειώνει τα αιτήματα HTTP και βελτιώνει την ταχύτητα φόρτωσης.
Για κεφαλίδες αιτημάτων HTTP, το πρόγραμμα περιήγησης είναι πολύ λεπτομερές. Όταν ομαδοποιείται, η μέτρηση των συνολικών byte που αποστέλλονται μειώνεται σημαντικά. Οι χρόνοι φόρτωσης παρουσιάζουν σημαντικές βελτιώσεις, αλλά αυτό το παράδειγμα εκτελείται τοπικά. Η ομαδοποίηση και η ελαχιστοποίηση μπορούν να συνδυαστούν με περιουσιακά στοιχεία που μεταφέρονται μέσω του δικτύου για την επίτευξη υψηλότερων κερδών απόδοσης.
ASP.NET Το Core δεν έχει τη δική του ομαδοποιημένη και συμπιεσμένη λύση και πρέπει να χρησιμοποιήσει μια λύση που παρέχεται από τρίτο μέρος, αυτό το άρθρο χρησιμοποιεί "LigerShark.WebOptimizer.Πυρήνας(Η βιβλιοθήκη τελικά τηλεφώνησε.)NUglifyΕφαρμογή χειρισμού JS και CSS), διεύθυνση GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Αρχικά, δημιουργήστε ένα νέο έργο ASP.NET Core 6 και εκτελέστε την ακόλουθη εντολή για αναφορά:
Δημιουργήστε έναν νέο στατικό φάκελο στο έργο wwwroot για να αποθηκεύσετε τα δοκιμαστικά αρχεία css και js. Δημιουργήστε ένα νέο αρχείο CSS και JS, όπως φαίνεται παρακάτω:
Τροποποιήστε το αρχείο Program.cs και προσθέστε την υπηρεσία WebOptimizer και το ενδιάμεσο λογισμικό, ο κύριος κώδικας έχει ως εξής:
Όταν προσπαθούμε να ξεκινήσουμε το έργο, διαπιστώνουμε ότι τα σχόλια τόσο του κώδικα CSS όσο και του κώδικα JS έχουν διαγραφεί και τα αρχεία έχουν συμπιεστεί και ορισμένες μεταβλητές στο JS έχουν μειωθεί σε ένα μόνο γράμμα, όπως φαίνεται στο παρακάτω σχήμα:
Στη συνέχεια, δημιουργήστε ένα νέο αρχείο js από τον στατικό φάκελο για να δοκιμάσετε τη λειτουργία ομαδοποίησης.Ομαδοποιήστε test.js και test2.js σε ένα μόνο αρχείο common.js(και δεν δημιουργεί common.js φυσικό αρχείο), ο κωδικός διαμόρφωσης είναι ο εξής:
Οι αποδόσεις είναι οι εξής:
Αναφορά:
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
|
Δημοσιεύτηκε στις 2022-3-28 20:55:50
|
|
|
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 2022-3-28 20:56:47
|
Δημοσιεύτηκε στις 2022-3-29 00:38:21
|
(Δεν ξέρω πώς να διαγράψω διπλότυπα σχόλια, παρακαλώ διαγράψτε αυτήν την ανάρτηση όταν τη δει ο webmaster)