Configurar o plug-in Imagemin webpack
Este Glitch já contém webpack
, webpack-cli
e
imagemin-webpack-plugin
Para adicionar a configuração do Imagemin, você vai precisar
para editar o arquivo webpack.config.js
.
O webpack.config.js
atual deste projeto está copiando imagens de
diretório images/
para o diretório dist/
, mas ainda não foi
compactá-los.
- Clique em Remixar para editar para tornar o projeto editável.
- Primeiro, declare o plug-in Imagemin adicionando este código na parte de cima
webpack.config.js
:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- Em seguida, adicione o código abaixo como o último item na matriz
plugins[]
. Isso adiciona o Imagemin à lista de plug-ins que o webpack usa:
new ImageminPlugin()
✔︎ check-in
O arquivo webpack.config.js
completo vai ficar assim:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin()
]
}
Agora você tem uma configuração do webpack que compacta imagens usando o Imagemin.
Executar o webpack
- Clique em Terminal. Observação: se o botão "Terminal" não aparecer, talvez seja necessário usar a opção "Tela cheia".
- Para compactar suas imagens, execute o webpack digitando o seguinte comando no console:
webpack --config webpack.config.js --mode development
Mas o que acontece se você executar o webpack no modo de produção?
- Execute o webpack novamente, mas desta vez no modo de produção:
webpack --config webpack.config.js --mode production
Desta vez, o webpack exibirá um aviso informando que seu arquivo PNG
arquivos, apesar de alguma compressão, ainda excedem o limite de tamanho recomendado.
Os modos development
e production
do webpack priorizam coisas diferentes, o que
é por que esse aviso só aparece ao executar o webpack no modo de produção.)
Personalize a configuração do Imagemin para corrigir esse aviso.
Personalizar a configuração do Imagemin
Adicione configurações para compactar imagens PNG transmitindo o seguinte objeto para ImageminPlugin()
:
{pngquant: ({quality: [0.5, 0.5]})}
Esse código instrui o Imagemin a compactar PNGs usando o plug-in Pngquant. A
O campo quality
usa um intervalo de valores min
e max
para determinar o
nível de compressão: 0 é o menor e 1 é o mais alto. Para forçar todas as imagens a
seja compactado com 50% de qualidade, transmita 0.5
como o valor mínimo e máximo.
✔︎ check-in
Seu arquivo webpack.config.js
ficou assim:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
})
]
}
Mas e os JPEGs? O projeto também tem imagens JPEG, portanto, especifique como eles são comprimidos.
Personalizar a configuração do Imagemin (continuação)
Em vez de usar o plug-in padrão do imagemin-webpack-plugin
para a compactação de JPG.
(imagemin-jpegtran
), use o plug-in imagemin-mozjpeg
. Ao contrário do Jpegtran,
O Mozjpeg permite especificar uma qualidade para a compactação de JPG. Nós
já instalou o plug-in Mozjpeg para você neste Glitch, mas você precisa
edite o arquivo webpack.config.js
:
- Inicialize o plug-in
imagemin-mozjpeg
adicionando a seguinte linha ao parte superior do arquivowebpack.config.js
:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Adicione uma propriedade
plugins
ao objeto transmitido paraImageminPlugin()
, de modo que o objeto agora ficará assim:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Esse código instrui o webpack a compactar JPGs a uma qualidade de 50 (0 é o pior, 100 é o melhor) usando o plug-in Mozjpeg.
Se você estiver adicionando configurações para um plug-in que é um plug-in padrão do
imagemin-webpack-plugin
, elas poderão ser adicionadas como um par de chave-objeto no objeto.
transmitido para ImageminPlugin()
. As configurações da Pnquant são um bom exemplo de
isso.
No entanto, se você estiver adicionando configurações para plug-ins não padrão (por exemplo,
Mozjpeg), eles devem ser adicionados incluindo-os na matriz correspondente ao
a propriedade plugins
.
✔︎ check-in
Seu código vai ficar assim:
const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
]
}
Executar o webpack novamente e verificar os resultados com o Lighthouse
- No console, execute o webpack novamente:
webpack --config webpack.config.js --mode production
Oba! Suas alterações devem ter corrigido os avisos do webpack.
O webpack avisa sobre imagens grandes, mas não informa se elas estão sendo não compactado ou compactado. É por isso que é sempre uma boa ideia usar Lighthouse para verificar suas alterações.
"Codifique imagens com eficiência" a auditoria de desempenho informa se as imagens JPEG da página são compactadas de forma ideal.
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
- Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho). na versão ativa do Glitch e verifique se a opção Codificação de imagens foi aprovado.
Pronto. Você usou o Imagemin para compactar as imagens na sua página de maneira otimizada.