Вимоги: У проєкті майже всі фронтенд-фреймворки посилаються, такі як: 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Розмір файлу163kb, початковий проєкт виглядає так:
Почніть оптимізувати з PurgeCSS, створюючи новий у корені проєктуpurgecss.config.jsКонфігураційний файл виглядає так:
Посилання на конфігураційний файл PurgeCSS виглядає так:
interface UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
екстрактори?: Масив<Extractors>;
fontFace?: boolean;
ключові кадри?: булеві;
вихід?: рядок;
відхилено?: булево;
rejectedCss?: булевий;
STDIN?: булевий;
Stdout?: булевий;
змінні?: булеві;
safelist?: UserDefinedSafelist;
блоклист?: StringRegExpArray;
}
interface RawContent {
розширення: string
RAW: String
}
інтерфейс RawCSS {
RAW: String
}
тип StringRegExpArray = Масив<RegExp | рядок>;
тип ComplexSafelist = {
standard?: StringRegExpArray;
deep?: RegExp[];
жадібно?: RegExp[];
змінних?: StringRegExpArray;
ключові кадри?: StringRegExpArray;
};
тип UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Як показано нижче:
Почніть опублікований проєкт і перегляньте його у своєму браузеріbootstrap.min.cssОптимізований розмір дорівнює20,8 КБ, як показано на рисунку нижче:
Це означає, що розмір вихідного файлу bootstrap.min.css становить 163 КБ, і ми використовуємо лише стиль класу 20,8 КБ, і PurgeCSS нам допомагаєБуло видалено 142 КБ контенту。
(Кінець) |
Опубліковано 08.05.2024 19:13:56
|
|
|
|
Орендодавець|
Опубліковано 08.05.2024 21:07:25
|
