요구사항: 프로젝트에서는 거의 모든 프론트엔드 프레임워크가 참조됩니다. 예를 들어 TailwindCSS, Bootstrap, MaterializeCSS, Foundation 등이 있습니다. 우리는 일부 CSS 스타일만 사용할 수 있고, 게시 시 사용하지 않는 CSS 코드를 삭제할 수 있습니다.웹사이트 접근 속도를 높이고, 대역폭과 브라우저 메모리를 절약하세요기다림.
PurgeCSS는 사용하지 않는 CSS를 제거하는 도구입니다. 개발 워크플로우의 일부가 될 수 있습니다.
웹사이트를 만들 때 TailwindCSS, Bootstrap, MaterializeCSS, Foundation 등과 같은 CSS 프레임워크를 사용할 수도 있습니다...... 하지만 프레임워크의 일부만 사용하고, 사용하지 않는 CSS 스타일도 많이 포함하게 됩니다.
이럴 때 PurgeCSS가 등장합니다. PurgeCSS는 콘텐츠와 CSS 파일을 분석합니다. 그 후 파일 내 선택기를 콘텐츠 파일의 선택기와 대조합니다. 이 방법은 CSS에서 사용하지 않는 셀렉터를 제거하여 CSS 파일 크기를 더 작게 만듭니다.
웹사이트:하이퍼링크 로그인이 보입니다.
GitHub 주소:하이퍼링크 로그인이 보입니다.
먼저, 다음 명령어로 npm을 사용해 PurgeCSS 패키지를 전역적으로 설치할 수 있습니다:
VS를 사용해 새로운 ASP.NET Core MVC 프로젝트를 만들면, 프로젝트는 기본적으로 Bootstrap 5 스타일을 사용하고 브라우저에서 불러옵니다bootstrap.min.css파일 크기163kb, 시작 프로젝트는 다음과 같습니다:
PurgeCSS로 최적화를 시작하고, 프로젝트 루트에 새 CSS를 생성하세요purgecss.config.js구성 파일은 다음과 같습니다:
PurgeCSS 구성 파일 참조는 다음과 같습니다:
interface UserDefinedOptions {
콘텐츠: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
추출기?: 배열<Extractors>;
fontFace?: 불리언;
키프레임?: 불리언;
출력?: 문자열;
거절?: 불리언;
rejectedCss?: boolean;
stdin?: Boolean;
STDOUT?: 불리언;
변수?: 불리언;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
인터페이스 RawContent {
확장: 문자열
RAW: 스트링
}
인터페이스 RawCSS {
RAW: 스트링
}
type StringRegExpArray = Array<RegExp | String>;
타입 ComplexSafelist = {
표준?: StringRegExpArray;
deep?: RegExp[];
욕심?: RegExp[];
변수?: StringRegExpArray;
키프레임?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
아래에 나와 있습니다:
게시된 프로젝트를 시작하고 브라우저에서 확인해 보세요bootstrap.min.css최적화된 크기는 다음과 같습니다20.8 kb, 아래 그림에서 볼 수 있습니다:
즉, bootstrap.min.css 소스 파일 크기는 163kb이고, 내부에서는 20.8kb 클래스 스타일만 사용하며, PurgeCSS가 도와줍니다142KB의 콘텐츠가 삭제되었습니다。
(끝) |
게시됨 2024. 5. 8. 오후 7:13:56
|
|
|
|
집주인|
게시됨 2024. 5. 8. 오후 9:07:25
|
