Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • A medida
  • Minificação
  • Compressão de dados
  • Compactação dinâmica
  • Compactação estática

Minifique e comprima payloads de rede

Nov 5, 2018
Available in: English, Español, 中文 e 한국어
Appears in: Tempos de carregamento rápidos
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Nesta página
  • A medida
  • Minificação
  • Compressão de dados
  • Compactação dinâmica
  • Compactação estática

Existem duas técnicas úteis que podem ser usadas para melhorar o desempenho de sua página da web:

  • Minificação
  • Compactação de dados

A incorporação de ambas as técnicas reduz o tamanho do payload e, por sua vez, melhora o tempo de carregamento da página.

A medida #

O Lighthouse exibirá uma auditoria com falha se detectar quaisquer recursos CSS ou JS em sua página que possam ser minificados.

Auditoria Lighthouse minifica CSSAuditoria Lighthouse minifica JS

Ele também audita todos os ativos não compactados.

Lighthouse: ativar compactação de texto

Minificação #

Minificação é o processo de remover espaços em branco e qualquer código que não seja necessário para criar um arquivo de código menor, mas perfeitamente válido. Terser é uma ferramenta de compressão de JavaScript popular e webpack v4 inclui um plugin para esta biblioteca por padrão para criar arquivos de compilação minificados.

  • Se você estiver usando o webpack v4 ou superior, não deverá fazer nenhum trabalho adicional. 👍
  • Se você estiver usando uma versão mais antiga do webpack, instale e inclua TerserWebpackPlugin nas definições de configuração do webpack. Siga a documentação para saber como.
  • Se você não estiver usando um módulo Terser, use o Terser como uma ferramenta CLI ou inclua-o diretamente como uma dependência de seu aplicativo. A documentação do projeto fornece instruções.

Compressão de dados #

A compactação é o processo de modificação de dados usando um algoritmo de compactação. Gzip é o formato de compactação mais amplamente usado para interações de servidor e cliente. Brotli é um algoritmo de compactação mais recente que pode fornecer resultados de compactação ainda melhores do que o Gzip.

Compactar arquivos pode melhorar significativamente o desempenho de uma página da web, mas raramente você precisa fazer isso sozinho. Muitas plataformas de hospedagem, CDNs e servidores proxy reverso codificam ativos com compactação por padrão ou permitem que você os configure facilmente. Leia a documentação da ferramenta que você está usando para ver se a compactação já é suportada antes de tentar implementar sua própria solução.

Existem duas maneiras diferentes de compactar arquivos enviados para um navegador:

  • Dinamicamente
  • Estatisticamente

Ambas as abordagens têm suas próprias vantagens e desvantagens, que são abordadas na próxima seção. Use o que funcionar melhor para o seu aplicativo.

Compactação dinâmica #

Esse processo envolve a compactação de ativos em tempo real à medida que são solicitados pelo navegador. Isso pode ser mais simples do que compactar arquivos manualmente ou com um processo de construção, mas pode causar atrasos se níveis de compactação altos forem usados.

Express é uma estrutura da web popular para Node e fornece uma biblioteca de middleware de compactação. Use-o para compactar qualquer ativo conforme solicitado. Aqui está um exemplo de um arquivo de servidor inteiro que o usa corretamente:

const express = require('express');
const compression = require('compression');

const app = express();

app.use(compression());

app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});

Isso compacta seus ativos usando gzip . Se o seu servidor da web oferecer suporte, considere o uso de um módulo separado, como o shrink-ray, para compactar via Brotli para obter melhores taxas de compactação.

Experimente

Use express.js para compactar ativos com gzip e Brotli .

Compactação estática #

A compactação estática envolve compactar e salvar ativos antecipadamente. Isso pode fazer com que o processo de construção demore mais, especialmente se forem usados altos níveis de compactação, mas garante que nenhum atraso aconteça quando o navegador buscar o recurso compactado.

Se o seu servidor da web suportar Brotli, use um plugin como o BrotliWebpackPlugin com webpack para compactar seus ativos como parte de sua etapa de construção. Caso contrário, use o CompressionPlugin para compactar seus recursos com gzip. Ele pode ser incluído como qualquer outro plug-in no arquivo de configurações do webpack:

module.exports = {
//...
plugins: [
//...
new CompressionPlugin()
]
}

Depois que os arquivos compactados fizerem parte da pasta de construção, crie uma rota em seu servidor para lidar com todos os endpoints JS para servir os arquivos compactados. Aqui está um exemplo de como isso pode ser feito com Node e Express para ativos compactados com gzip.

const express = require('express');
const app = express();

<strong>app.get('*.js', (req, res, next) => {
	req.url = req.url + '.gz';
	res.set('Content-Encoding', 'gzip');
	next();
});</strong>

app.use(express.static('public'));
Desempenho
Last updated: Nov 5, 2018 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Minify and compress network payloads with gzip
  • Minify and compress network payloads with brotli
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.