Requisitos: Em um projeto, quase todos os frameworks front-end são referenciados, como: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc.; podemos usar apenas alguns dos estilos CSS nele, e ao publicar, podemos excluir código CSS não utilizado, assimAcelerar o acesso ao site, economizar largura de banda e memória do navegadorEsperar.
PurgeCSS é uma ferramenta para remover CSS não utilizado. Isso pode fazer parte do seu fluxo de trabalho de desenvolvimento.
Quando você constrói um site, pode decidir usar um framework CSS como TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc...... Mas você só vai usar uma pequena parte do framework e vai conter muitos estilos CSS não utilizados.
É aí que entra o PurgeCSS. PurgeCSS analisa seu conteúdo e arquivos CSS. Depois, ele corresponde os seletores usados no arquivo com os do arquivo de conteúdo. Ele remove seletores não utilizados do CSS, resultando em arquivos CSS menores.
Site:O login do hiperlink está visível.
Endereço do GitHub:O login do hiperlink está visível.
Primeiro, podemos instalar o pacote PurgeCSS globalmente usando npm com o seguinte comando:
Crie um novo projeto ASP.NET Core MVC usando VS, e o projeto usará o estilo Bootstrap 5 por padrão e carregará no navegadorbootstrap.min.cssTamanho do arquivo163kb, o projeto inicial é o seguinte:
Comece a otimizar com o PurgeCSS, criando um novo na raiz do projetopurgecss.config.jsO arquivo de configuração é o seguinte:
A referência do arquivo de configuração PurgeCSS é a seguinte:
interface UserDefinedOptions {
conteúdo: Matriz <string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extratores?: Matriz<Extractors>;
fontFace?: booleano;
quadros-chave?: booleano;
saída?: string;
Rejeitado?: Booleano;
rejeitadosCss?: booleano;
stdin?: booleano;
Período Alternativo?: Booleano;
variáveis?: booleano;
safelist?: UserDefinedSafelist;
lista de bloqueios?: StringRegExpArray;
}
interface RawContent {
extensão: string
raw: string
}
interface RawCSS {
raw: string
}
tipo StringRegExpArray = Array<RegExp | string>;
tipo ComplexSafelist = {
padrão?: StringRegExpArray;
profundo?: RegExp[];
ganancioso?: RegExp[];
variáveis?: StringRegExpArray;
quadros-chave?: StringRegExpArray;
};
tipo UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Como mostrado abaixo:
Inicie o projeto publicado e visualize-o no seu navegadorbootstrap.min.cssO tamanho otimizado é20,8 kb, como mostrado na figura abaixo:
Isso significa que o tamanho do arquivo fonte bootstrap.min.css é 163kb, e usamos apenas o estilo de classe de 20,8kb dentro, e o PurgeCSS nos ajuda142 kb de conteúdo foram removidos。
(Fim) |
Publicado em 08/05/2024 19:13:56
|
|
|
|
Senhorio|
Publicado em 08/05/2024 21:07:25
|
