이 페이지는 Cloud Translation API를 통해 번역되었습니다.

webpack과 함께 Imagemin 사용

Katie Hempenius

Imagemin webpack 플러그인 설정

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

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

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고: 이미지를 새 dist/ 폴더에 복사하는 이유는 무엇인가요? 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의 서비스 중인 버전에서 이를 효율적으로 인코딩하고 이미지 감사에 통과했습니다.

'효율적으로 이미지 인코딩' Lighthouse의 감사

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