Persyaratan: Dalam sebuah proyek, hampir semua kerangka kerja front-end dirujuk, seperti: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, dll., kita hanya dapat menggunakan beberapa gaya CSS di dalamnya, dan saat menerbitkan, kita dapat menghapus kode CSS yang tidak digunakan, sehinggaMempercepat akses situs web, menghemat bandwidth dan memori browserTunggu.
PurgeCSS adalah alat untuk menghapus CSS yang tidak digunakan. Ini bisa menjadi bagian dari alur kerja pengembangan Anda.
Saat Anda membangun situs web, Anda dapat memutuskan untuk menggunakan kerangka kerja CSS seperti TailwindCSS, Bootstrap, MaterializeCSS, Foundation, dll...... Tetapi Anda hanya akan menggunakan sebagian kecil dari kerangka kerja dan akan berisi banyak gaya CSS yang tidak digunakan.
Di sinilah PurgeCSS berperan. PurgeCSS menganalisis konten dan file CSS Anda. Kemudian mencocokkan pemilih yang digunakan dalam file dengan yang ada di file konten. Ini menghapus pemilih yang tidak digunakan dari CSS, menghasilkan file CSS yang lebih kecil.
Situs web:Login hyperlink terlihat.
Alamat GitHub:Login hyperlink terlihat.
Pertama, kita dapat menginstal paket PurgeCSS secara global menggunakan npm dengan perintah berikut:
Buat proyek MVC ASP.NET Core baru menggunakan VS, dan proyek akan menggunakan gaya Bootstrap 5 secara default dan memuat di browserbootstrap.min.cssUkuran file163kb, proyek awal adalah sebagai berikut:
Mulai mengoptimalkan dengan PurgeCSS, membuat yang baru di root proyekpurgecss.config.jsFile konfigurasi berbunyi sebagai berikut:
Referensi file konfigurasi PurgeCSS adalah sebagai berikut:
antarmuka UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
ekstraktor?: Array<Extractors>;
fontFace?: boolean;
Bingkai Utama?: Boolean;
keluaran?: string;
ditolak?: Boolean;
ditolakCss?: boolean;
Stdin?: Boolean;
stdout?: boolean;
variabel?: Boolean;
daftar aman?: Daftar aman yang ditentukan pengguna;
daftar blokir?: StringRegExpArray;
}
antarmuka RawContent {
ekstensi: string
mentah: string
}
antarmuka RawCSS {
mentah: string
}
ketik StringRegExpArray = Array<RegExp | string>;
ketik ComplexSafelist = {
standar?: StringRegExpArray;
dalam?: RegExp[];
serakah?: RegExp[];
variabel?: StringRegExpArray;
bingkai utama?: StringRegExpArray;
};
ketik UserDefinedSafelist = StringRegExpArray | Daftar Aman Kompleks;
Seperti yang ditunjukkan di bawah ini:
Mulai proyek yang diterbitkan dan lihat di browser Andabootstrap.min.cssUkuran yang dioptimalkan adalah20,8 kb, seperti yang ditunjukkan pada gambar di bawah ini:
Ini berarti bahwa ukuran file sumber bootstrap.min.css adalah 163kb, dan kami hanya menggunakan gaya kelas 20.8kb di dalamnya, dan PurgeCSS membantu kami142 kb konten telah dihapus。
(Akhir) |
Diposting pada 08/05/2024 19.13.56
|
|
|
|
Tuan tanah|
Diposting pada 08/05/2024 21.07.25
|
