Gereksinimler: Bir projede, TailwindCSS, Bootstrap, MaterializeCSS, Foundation vb. gibi neredeyse tüm ön uç framework'lere referans verilir; sadece bazı CSS stillerini kullanabiliriz ve yayınlarken kullanılmayan CSS kodunu silebiliriz, böyleceWeb sitesine erişimi hızlandırın, bant genişliği ve tarayıcı belleğini tasarruf edinBeklemek.
PurgeCSS, kullanılmayan CSS'yi kaldırmak için kullanılan bir araçtır. Bu, geliştirme iş akışınızın bir parçası olabilir.
Bir web sitesi kurarken TailwindCSS, Bootstrap, MaterializeCSS, Foundation gibi bir CSS framework'ü kullanmaya karar verebilirsiniz...... Ama framework'ün sadece küçük bir kısmını kullanırsınız ve kullanılmayan birçok CSS stilini içerirsiniz.
İşte burada PurgeCSS devreye giriyor. PurgeCSS, içeriğinizi ve CSS dosyalarınızı analiz eder. Daha sonra dosyada kullanılan seçicileri içerik dosyasındaki seçicilerle eşleştirir. CSS'den kullanılmayan seçicileri kaldırır ve bu da CSS dosyalarının daha küçük olmasına yol açar.
Web Sitesi:Bağlantı girişi görünür.
GitHub adresi:Bağlantı girişi görünür.
İlk olarak, PurgeCSS paketini npm kullanarak aşağıdaki komutla küresel olarak yükleyebiliriz:
VS kullanarak yeni bir ASP.NET Core MVC projesi oluşturun, proje varsayılan olarak Bootstrap 5 tarzını kullanacak ve tarayıcıda yüklenecekbootstrap.min.cssDosya boyutu163kb, başlangıç projesi şu şekildedir:
PurgeCSS ile optimize etmeye başlayın, proje kökünde yeni bir tane oluşturunpurgecss.config.jsYapılandırma dosyası şöyledir:
PurgeCSS yapılandırma dosyası referansı aşağıdaki gibidir:
arayüz UserDefinedOptions {
content: Array<string | RawContent>;
css: Dizi<diziler | RawCSS>;
defaultExtractor?: ExtractorFunction;
çıkarıcılar?: Dizi<Extractors>;
fontFace?: boolean;
anahtar kareler?: Boolean;
çıktı?: Diz;
reddedilmiş?: Boolean;
rejectedCss?: boolean;
STDIN?: Boolean;
Stdout?: Boolean;
değişkenler?: Boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
Uzantı: Dizi
RAW: Tel
}
arayüz RawCSS {
RAW: Tel
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
derin?: RegExp[];
açgözlü?: RegExp[];
değişkenler?: StringRegExpArray;
anahtar kareler?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Aşağıda gösterildiği gibi:
Yayınlanan projeyi başlatın ve tarayıcınızda izleyinbootstrap.min.cssOptimize edilmiş boyut şudur:20.8 kb, aşağıdaki şekilde gösterildiği gibi:
Bu, bootstrap.min.css kaynak dosya boyutunun 163kb olduğu anlamına gelir ve içeride sadece 20.8kb sınıf stilini kullanıyoruz, ayrıca PurgeCSS bize yardımcı olur142 KB içerik kaldırıldı。
(Son) |
Yayınlandı 8.05.2024 19:13:56
|
|
|
|
Ev sahibi|
Yayınlandı 8.05.2024 21:07:25
|
