webpack과 함께 Imagemin 사용

Katie Hempenius

Imagemin webpack 플러그인 설정

이 Glitch에는 이미 webpack, webpack-cli, imagemin-webpack-plugin가 포함되어 있습니다. Imagemin 구성을 추가하려면 webpack.config.js 파일을 수정해야 합니다.

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

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

• 먼저 webpack.config.js 상단에 다음 코드를 추가하여 Imagemin 플러그인을 선언합니다.

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을 실행하세요.

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

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

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

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

이번에는 PNG 파일이 일부 압축에도 불구하고 여전히 권장 크기 한도를 초과한다는 것을 알리는 경고가 webpack에 표시됩니다. (webpack의 development 및 production 모드는 우선순위가 다르므로 프로덕션 모드에서 webpack을 실행할 때만 이 경고가 표시됩니다.)

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

Imagemin 구성 맞춤설정

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

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

이 코드는 Pngquant 플러그인을 사용하여 PNG를 압축하도록 Imagemin에 지시합니다. 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 압축의 압축 품질을 지정할 수 있습니다. 이 Glitch에는 이미 Mozjpeg 플러그인이 설치되어 있지만 webpack.config.js 파일을 수정해야 합니다.

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

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

• ImageminPlugin()에 전달된 객체에 plugins 속성을 추가하여 객체가 이제 다음과 같이 표시되도록 합니다.

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

이 코드는 Mozjpeg 플러그인을 사용하여 JPG를 50 품질 (0이 최악, 100이 최고)으로 압축하도록 webpack에 지시합니다.

imagemin-webpack-plugin의 기본 플러그인인 플러그인 설정을 추가하는 경우 ImageminPlugin()에 전달된 객체에 키-객체 쌍으로 추가할 수 있습니다. Pnquant의 설정이 이에 대한 좋은 예입니다.

그러나 기본이 아닌 플러그인 (예: 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})]
    })
  ]
}

webpack 재실행 및 Lighthouse로 결과 확인

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

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

축하합니다. 변경사항으로 인해 웹팩 경고가 수정되었을 것입니다.

webpack은 큰 이미지에 대해 경고하지만 이미지가 압축되지 않았는지 또는 과소 압축되었는지는 알 수 없습니다. 따라서 항상 Lighthouse를 사용하여 변경사항을 확인하는 것이 좋습니다.

Lighthouse의 '효율적인 이미지 인코딩' 성능 감사를 통해 페이지의 JPEG 이미지가 최적으로 압축되었는지 확인할 수 있습니다.

• 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 을 누릅니다.
• Glitch의 실시간 버전에서 Lighthouse 성능 감사 (Lighthouse > 옵션 > 성능)를 실행하고 이미지를 효율적으로 인코딩 감사를 통과했는지 확인합니다.

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