Configurar o plug-in do webpack do Imagemin
Esse Glitch já contém webpack, webpack-cli e
imagemin-webpack-plugin. Para adicionar a configuração do Imagemin, você precisa
editar o arquivo webpack.config.js.
O webpack.config.js atual deste projeto copia imagens do diretório images/ para o diretório dist/, mas não as compacta.
- Clique em Remix to Edit para tornar o projeto editável.
- Primeiro, declare o plug-in Imagemin adicionando este código na parte de cima de
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 as 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 exibe um aviso informando que os arquivos PNG, apesar de alguma compactação, ainda excedem o limite de tamanho recomendado.
Os modos development e production do webpack priorizam coisas diferentes, por isso esse aviso só aparece ao executar o webpack no modo de produção.
Personalize nossa 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. O
campo quality usa um intervalo de valores min e max para determinar o
nível de compactação: 0 é o mais baixo e 1 é o mais alto. Para forçar a compactação de todas as imagens
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, então você também precisa especificar como elas são compactadas.
Personalizar a configuração do Imagemin (continuação)
Em vez de usar o plug-in padrão do imagemin-webpack-plugin para compactação JPG
(imagemin-jpegtran), use o plug-in imagemin-mozjpeg. Ao contrário do Jpegtran,
o Mozjpeg permite especificar uma qualidade de compactação para a compactação JPG. Já
instalamos o plug-in Mozjpeg para você neste Glitch, mas você precisará
editar o arquivo webpack.config.js:
- Inicialize o plug-in
imagemin-mozjpegadicionando a seguinte linha na parte de cima do arquivowebpack.config.js:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Adicione uma propriedade
pluginsao objeto transmitido paraImageminPlugin(), de modo que o objeto fique assim:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Esse código instrui o webpack a compactar JPGs com uma qualidade de 50 (0 é a pior; 100 é a melhor) usando o plug-in Mozjpeg.
Se você estiver adicionando configurações para 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 de Pnquant são um bom exemplo disso.
No entanto, se você estiver adicionando configurações para plug-ins não padrão (por exemplo,
Mozjpeg), elas precisam ser adicionadas incluindo-as na matriz correspondente à
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})]
})
]
}
Execute o webpack novamente e verifique os resultados com o Lighthouse
- No console, execute o webpack novamente:
webpack --config webpack.config.js --mode production
Oba! Suas mudanças devem ter corrigido os avisos do webpack.
O webpack avisa sobre imagens grandes, mas não informa se elas estão descompactadas ou pouco compactadas. Por isso, é sempre bom usar o Lighthouse para verificar as mudanças.
A auditoria de desempenho "Codificar imagens de forma eficiente" do Lighthouse pode informar se as imagens JPEG na sua página estão compactadas de forma ideal.
- Para visualizar o site, pressione View App. Em seguida, pressione
Fullscreen
. - Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho) na versão ativa do Glitch e verifique se a auditoria Codificar imagens de maneira eficiente foi aprovada.
Pronto. Você usou o Imagemin para compactar as imagens da sua página de forma ideal.