Configurar o plug-in Imagemin Webpack
Esse Glitch já contém webpack, webpack-cli e
imagemin-webpack-plugin. Para adicionar a configuração da Imagemin, você precisa
editar o arquivo webpack.config.js.
O webpack.config.js atual deste projeto está copiando imagens do
diretório images/ para o diretório dist/, mas não as compactou.
- 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 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 a Imagemin à lista de plug-ins que o webpack usa:
new ImageminPlugin()
✔✔ Acompanhamento
O arquivo webpack.config.js completo 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 a Imagemin.
Executar o webpack
- Clique em Terminal. Observação: se o botão "Terminal" não for exibido, 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 seus arquivos PNG, mesmo com certa compactação, ainda excedem o limite de tamanho recomendado.
Os modos development e production do webpack priorizam coisas diferentes, e
é por isso que você só vê esse aviso ao executar o webpack no modo de produção.
Personalize nossa configuração da Imagemin para corrigir esse aviso.
Personalizar a configuração da imagemin
Adicione configurações para compactar imagens PNG transmitindo o seguinte objeto para ImageminPlugin():
{pngquant: ({quality: [0.5, 0.5]})}
Esse código informa à Imagemin para 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 menor e 1 é o mais alto. Para forçar todas as imagens a
ser compactadas com 50% de qualidade, transmita 0.5 como os valores mínimo e máximo.
✔✔ Acompanhamento
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 especifique como elas também são compactadas.
Personalizar a configuração da Imagemin (continuação)
Em vez de usar o plug-in padrão de imagemin-webpack-plugin para compactação de JPG
(imagemin-jpegtran), use o plug-in imagemin-mozjpeg. Ao contrário do Jpegtran,
o Mozjpeg permite especificar uma qualidade de compactação para sua compactação de 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 à parte de cima do arquivowebpack.config.js:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Adicione uma propriedade
pluginsao objeto transmitido paraImageminPlugin(), de modo que ele fique assim:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Esse código instrui o webpack a compactar JPGs para 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 que é um plug-in padrão de
imagemin-webpack-plugin, elas podem ser adicionadas como um par de chave-objeto no objeto
transmitido para ImageminPlugin(). As configurações do 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), eles precisam ser incluídos na matriz correspondente à
propriedade plugins.
✔✔ Acompanhamento
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 novamente o webpack 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 você sobre imagens grandes, mas não informa se elas estão descompactadas ou subcompactadas. É por isso que é sempre uma boa ideia usar o Lighthouse para verificar suas mudanças.
A auditoria de desempenho "Codificar imagens com eficiência" do Lighthouse pode informar se as imagens JPEG na sua página estão compactadas de maneira ideal.
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
. - Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Performance) na versão ativa do Glitch e verifique se a auditoria Codificar imagens com eficiência foi aprovada.
Pronto. Você usou a Imagemin para compactar as imagens na sua página de forma ideal.