webpack과 함께 Imagemin 사용

Katie Hempenius

Imagemin webpack 플러그인 설정

이 결함에는 이미 webpack, webpack-cli 및 imagemin-webpack-plugin입니다. Imagemin 구성을 추가하려면 다음이 필요합니다. webpack.config.js 파일을 수정하세요.

이 프로젝트의 기존 webpack.config.js에서 이미지를 복사 중입니다. images/ 디렉터리를 dist/ 디렉터리로 이동하지만 압축하는 것입니다.

• 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.

• 먼저 webpack.config.js:

const ImageminPlugin = require('imagemin-webpack-plugin').default;

• 다음으로, 다음 코드를 plugins[] 배열의 마지막 항목으로 추가합니다. 이 webpack이 사용하는 플러그인 목록에 Imagemin을 추가합니다.

new ImageminPlugin()

✔︎ 체크인

이제 전체 webpack.config.js 파일은 다음과 같습니다.

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()
  ]
}

이제 Imagemin을 사용하여 이미지를 압축하는 webpack 구성이 준비되었습니다.

webpack 실행

• 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수도 있음).
• 이미지를 압축하려면 콘솔:

webpack --config webpack.config.js --mode development

그런데 프로덕션 모드에서 webpack을 실행하면 어떻게 될까요?

• webpack을 다시 실행하되 이번에는 프로덕션 모드에서 다음을 실행합니다.

webpack --config webpack.config.js --mode production

이번에는 Webpack이 파일은 압축에도 불구하고 권장 크기 제한을 초과합니다. (Webpack의 development 및 production 모드는 서로 다른 항목에 우선순위를 두므로 따라서 프로덕션 모드에서 webpack을 실행할 때만 이 경고가 표시됩니다.)

이 경고를 해결하려면 Imagemin 구성을 맞춤설정하세요.

Imagemin 구성 맞춤설정

다음 객체를 ImageminPlugin()에 전달하여 PNG 이미지를 압축하기 위한 설정을 추가합니다.

{pngquant: ({quality: [0.5, 0.5]})}

이 코드는 Imagemin에 Pngquant 플러그인을 사용하여 PNG를 압축하도록 지시합니다. 이 quality 필드는 min 및 max 범위의 값을 사용하여 압축 수준이며 0이 가장 낮고 1이 가장 높습니다. 모든 이미지를 50% 품질로 압축되어야 하는 경우 0.5를 최솟값과 최댓값으로 모두 전달합니다.

✔︎ 체크인

이제 webpack.config.js 파일이 다음과 같이 표시됩니다.

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]}),
      })
  ]
}

그렇다면 JPEG는 어떨까요? 프로젝트에는 JPEG 이미지도 있으므로 압축되는 방식도 포함됩니다.

Imagemin 구성 맞춤설정 (계속)

JPG 압축을 위해 imagemin-webpack-plugin의 기본 플러그인을 사용하는 대신 (imagemin-jpegtran), imagemin-mozjpeg 플러그인을 사용합니다. Jpegtran과 달리 Mozjpeg를 사용하면 JPG 압축의 압축 품질을 지정할 수 있습니다. Google에서는 이 Glitch에 Mozjpeg 플러그인이 이미 설치되어 있지만 webpack.config.js 파일을 수정합니다.

• 다음 줄을 추가하여 imagemin-mozjpeg 플러그인을 초기화합니다. webpack.config.js 파일의 맨 위에 다음을 수행합니다.

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

• 다음과 같이 ImageminPlugin()에 전달된 객체에 plugins 속성을 추가합니다. 객체는 이제 다음과 같습니다.

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

이 코드는 Webpack에 JPG를 50의 품질로 압축하도록 지시합니다 (0이 최악, 100이 가장 좋음) Mozjpeg 플러그인을 사용하는 것이 좋습니다.

Chrome의 기본 플러그인인 플러그인에 imagemin-webpack-plugin: 객체의 키-객체 쌍으로 추가할 수 있습니다. ImageminPlugin()에 전달되었습니다. Pnquantity 설정은 이거죠.

하지만 기본이 아닌 플러그인 (예: Mozjpeg인 경우, plugins 속성

✔︎ 체크인

이제 코드가 다음과 같이 표시됩니다.

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})]
    })
  ]
}

Lighthouse로 webpack 다시 실행 및 결과 확인

• 콘솔에서 webpack을 다시 실행합니다.

webpack --config webpack.config.js --mode production

축하합니다. 변경사항으로 인해 webpack 경고가 수정되었습니다.

webpack은 큰 이미지에 대해 경고하지만 이미지가 동일한지 알려주지는 못합니다. 또는 압축되지 않은 경우입니다 그렇기 때문에 항상 Lighthouse를 클릭하여 변경사항을 확인합니다.

Lighthouse의 '효율적으로 이미지 인코딩' 실적 감사를 통해 페이지의 JPEG 이미지가 최적으로 압축됩니다.

• 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
• Lighthouse 성능 감사를 실행합니다 (Lighthouse > 옵션 > 성능). Glitch의 서비스 중인 버전에서 이를 효율적으로 인코딩하고 이미지 감사에 통과했습니다.

완료되었습니다. Imagemin을 사용하여 페이지의 이미지를 최적으로 압축했습니다.