Απαιτήσεις: Σε ένα έργο, αναφέρονται σχεδόν όλα τα πλαίσια διεπαφής, όπως: TailwindCSS, Bootstrap, MaterializeCSS, Foundation κ.λπ., μπορούμε να χρησιμοποιήσουμε μόνο μερικά από τα στυλ CSS σε αυτό και κατά τη δημοσίευση, μπορούμε να διαγράψουμε τον αχρησιμοποίητο κώδικα CSS, έτσιΕπιταχύνετε την πρόσβαση στον ιστότοπο, εξοικονομήστε εύρος ζώνης και μνήμη προγράμματος περιήγησηςΠερίμενε.
Το PurgeCSS είναι ένα εργαλείο για την αφαίρεση αχρησιμοποίητου CSS. Μπορεί να είναι μέρος της ροής εργασιών ανάπτυξής σας.
Όταν δημιουργείτε έναν ιστότοπο, μπορεί να αποφασίσετε να χρησιμοποιήσετε ένα πλαίσιο CSS όπως TailwindCSS, Bootstrap, MaterializeCSS, Foundation κ.λπ...... Αλλά θα χρησιμοποιήσετε μόνο ένα μικρό μέρος του πλαισίου και θα περιέχει πολλά αχρησιμοποίητα στυλ CSS.
Εδώ μπαίνει στο παιχνίδι το PurgeCSS. Το PurgeCSS αναλύει το περιεχόμενό σας και τα αρχεία CSS. Στη συνέχεια, αντιστοιχίζει τους επιλογείς που χρησιμοποιούνται στο αρχείο με αυτούς του αρχείου περιεχομένου. Αφαιρεί τους αχρησιμοποίητους επιλογείς από το CSS, με αποτέλεσμα μικρότερα αρχεία CSS.
Ιστοσελίδα:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Διεύθυνση GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Αρχικά, μπορούμε να εγκαταστήσουμε το πακέτο PurgeCSS παγκοσμίως χρησιμοποιώντας npm με την ακόλουθη εντολή:
Δημιουργήστε ένα νέο έργο ASP.NET Core MVC χρησιμοποιώντας VS και το έργο θα χρησιμοποιεί το στυλ Bootstrap 5 από προεπιλογή και θα φορτώνεται στο πρόγραμμα περιήγησηςbootstrap.min.cssΜέγεθος αρχείου163 KB, το έργο START έχει ως εξής:
Ξεκινήστε τη βελτιστοποίηση με το PurgeCSS, δημιουργώντας ένα νέο στη ρίζα του έργουpurgecss.config.jsΤο αρχείο διαμόρφωσης έχει ως εξής:
Η αναφορά του αρχείου διαμόρφωσης PurgeCSS έχει ως εξής:
διεπαφή UserDefinedOptions {
περιεχόμενο: Array<string | RawContent>;
css: Πίνακας<συμβολοσειρά | RawCSS>;
defaultExtractor?: Συνάρτηση εξαγωγής;
εξαγωγείς;: Συστοιχία<Extractors>;
fontFace?: boolean;
βασικά καρέ;: boolean;
έξοδος;: συμβολοσειρά;
απορρίφθηκε;: boolean;
απορρίφθηκεCss?: boolean;
stdin?: boolean;
stdout?: boolean;
μεταβλητές;: boolean;
ασφαλής λίστα;: UserDefinedSafelist;
λίστα αποκλεισμού;: StringRegExpArray;
}
διεπαφή RawContent {
Επέκταση: String
Raw: Συμβολοσειρά
}
διεπαφή RawCSS {
Raw: Συμβολοσειρά
}
πληκτρολογήστε StringRegExpArray = Array<RegExp | string>;
πληκτρολογήστε ComplexSafelist = {
πρότυπο;: StringRegExpArray;
deep?: RegExp[];
άπληστος;: RegExp[];
μεταβλητές;: StringRegExpArray;
βασικά καρέ;: StringRegExpArray;
};
πληκτρολογήστε UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Οπως φαίνεται παρακάτω:
Ξεκινήστε το δημοσιευμένο έργο και δείτε το στο πρόγραμμα περιήγησής σαςbootstrap.min.cssΤο βελτιστοποιημένο μέγεθος είναι20,8 KB, όπως φαίνεται στο παρακάτω σχήμα:
Αυτό σημαίνει ότι το μέγεθος του αρχείου πηγής bootstrap.min.css είναι 163 kb και χρησιμοποιούμε μόνο το στυλ κλάσης 20.8 kb μέσα και το PurgeCSS μας βοηθάΚαταργήθηκαν 142 KB περιεχομένου。
(Τέλος) |
Δημοσιεύτηκε στις 8/5/2024 7:13:56 μ.μ.
|
|
|
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 8/5/2024 9:07:25 μ.μ.
|
