Usando o Imagemin com o webpack

Katie Hempenius

Para seguir este codelab, abra este Glitch em uma segunda guia.

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.

.

Observação : por que você copiaria imagens para uma nova pasta dist/? dist/ é a abreviação de "distribuição". e é uma prática bastante comum manter o código original, as imagens etc. separados das versões distribuídas, porque eles podem ser um pouco diferentes.

• 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()

Observação : por que adicionar no final da matriz? Adicioná-lo garante que o Imagemin seja executado por último, depois de todos os outros plug-ins.

✔︎ 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 arquivo webpack.config.js:

const imageminMozjpeg = require('imagemin-mozjpeg');

• Adicione uma propriedade plugins ao objeto transmitido para ImageminPlugin(), 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.

Observação : você está se perguntando por que o Mozjpeg é adicionado à matriz de plug-ins, mas o Pngquant não é? Boa pergunta.

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.