Requisitos: Em projetos anteriores do MVC do .NET Framework, JS, CSS pode ser agrupado e comprimido usando a biblioteca Microsoft.AspNet.Web.Optimization da Microsoft. Depois de usar ASP.NET Core, como faço para agrupar e comprimir arquivos JS e CSS existentes?
O projeto .NET Framework faz referência ao seguinte:
Código de exemplo:
ligação
O agrupamento combina vários arquivos em um único arquivo. O agrupamento reduz o número de requisições de servidor necessárias para renderizar um ativo web, como uma página web. Você pode criar quantos pacotes individuais quiser, especificamente para CSS, JavaScript e mais. Menos arquivos significam do navegador para o servidor ou do serviço que fornece a aplicaçãoMenos requisições HTTP。 Isso melhora o desempenho do carregamento da página inicial.
comprimir
Minimize a remoção de caracteres desnecessários do seu código sem alterar a funcionalidade. O resultado foiO tamanho dos recursos solicitados, como CSS, imagens e arquivos JavaScript, é significativamente reduzido。 Efeitos colaterais comuns da minificação incluem encurtar nomes de variáveis para um caractere e remover comentários e espaços desnecessários. Ao mesmo tempo, podeConfundir o código, o que não é propício para que outros concorrentes leiam nosso código-fonte.
Ganhos de desempenho com agrupamento e compressão
A tabela a seguir descreve as diferenças entre carregar ativos individualmente e usar agrupamento e minificação:
Ele economiza tráfego e melhora a velocidade de carregamento em termos de transporte em rede, além de reduzir as requisições HTTP e melhorar a velocidade de carregamento.
Para cabeçalhos de requisição HTTP, o navegador é muito detalhado. Quando agrupado, o total de bytes enviados é significativamente reduzido. Os tempos de carregamento mostram melhorias significativas, mas este exemplo roda localmente. Agrupamento e minificação podem ser combinados com ativos transportados pela rede para alcançar ganhos de desempenho maiores.
ASP.NET o Core não possui sua própria solução agrupada e comprimida, e precisa usar uma solução fornecida por terceiros, este artigo utiliza "LigerShark.WebOptimizer.Core(A biblioteca acabou ligando.)NUgifyImplementar o tratamento de JS e CSS), endereço do GitHub:O login do hiperlink está visível.
Primeiro, crie um novo projeto ASP.NET Core 6 e execute o seguinte comando para referenciar:
Crie uma nova pasta estática no projeto wwwroot para armazenar os arquivos CSS e JS de teste. Crie um novo arquivo CSS e JS, conforme mostrado abaixo:
Modifique o arquivo Program.cs e adicione o serviço WebOptimizer e o middleware, o código principal é o seguinte:
Quando tentamos iniciar o projeto, descobrimos que os comentários tanto do código CSS quanto do JS foram deletados, os arquivos foram comprimidos e algumas variáveis no JS foram reduzidas a uma única letra, como mostrado na figura abaixo:
Depois, crie um novo arquivo js a partir da pasta estática para testar a função de agrupamento.Agrupe test.js e test2.js em um único arquivo common.js(e não gera um arquivo físico common.js), o código de configuração é o seguinte:
As renderizações são as seguintes:
Referência:
O login do hiperlink está visível.
O login do hiperlink está visível.
|
Postado em 2022-3-28 20:55:50
|
|
|
|
Senhorio|
Postado em 28-03-2022 20:56:47
|
Postado em 2022-3-29 00:38:21
|
(Não sei como apagar comentários duplicados, por favor apague este post quando o webmaster o vir)