Webpack के साथ Imagemin का इस्तेमाल करना

केटी हेम्पेनियस

Imagemin webpack प्लगिन सेट अप करना

इस ग्लिच में पहले से 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 का इस्तेमाल करके इमेज को कंप्रेस करता है.

वेबपैक चलाएं

• Terminal पर क्लिक करें (ध्यान दें: अगर टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
• अपनी इमेज को कंप्रेस करने के लिए, कंसोल में यह निर्देश टाइप करें और वेबपैक चलाएं:

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

लेकिन, अगर आप वेबपैक को प्रोडक्शन मोड में चलाते हैं, तो क्या होगा?

• वेबपैक फिर से चलाएं, लेकिन इस बार प्रोडक्शन मोड में:

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

इस बार, वेबपैक एक चेतावनी दिखाता है. इससे आपको पता चलता है कि आपकी PNG फ़ाइलें, कुछ कंप्रेस करने के बावजूद, सुझाई गई साइज़ की सीमा से ज़्यादा हैं. (वेबपैक के development और production मोड, अलग-अलग चीज़ों को प्राथमिकता देते हैं. इस वजह से, आपको यह चेतावनी सिर्फ़ प्रोडक्शन मोड में वेबपैक चलाते समय दिखती है.)

इस चेतावनी को ठीक करने के लिए, हमारे 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-jpegtran) के लिए, imagemin-webpack-plugin के डिफ़ॉल्ट प्लगिन का इस्तेमाल करने के बजाय, 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 प्लगिन का इस्तेमाल करके वेबपैक को JPGs को 50 (0 सबसे खराब; 100 सबसे अच्छा है) की क्वालिटी में कंप्रेस करने के लिए कहता है.

अगर किसी ऐसे प्लगिन के लिए सेटिंग जोड़ी जा रही हैं जो 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})]
    })
  ]
}

वेबपैक फिर से चलाएं और Lighthouse की मदद से नतीजों की पुष्टि करें

• कंसोल में, वेबपैक फिर से चलाएं:

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

बहुत बढ़िया! आपने वेबपैक से जुड़ी चेतावनियों को ठीक कर दिया था.

वेबपैक आपको बड़ी इमेज के बारे में चेतावनी देता है, लेकिन यह आपको यह नहीं बता सकता कि इमेज कंप्रेस नहीं की गई हैं या कम कंप्रेस की गई हैं. इसलिए, बदलावों की पुष्टि करने के लिए Lighthouse का इस्तेमाल करना हमेशा अच्छा होता है.

लाइटहाउस "इमेज को बेहतर तरीके से कोड में बदलें" परफ़ॉर्मेंस ऑडिट से आपको यह पता चल सकता है कि आपके पेज पर मौजूद JPEG इमेज को सही तरीके से कंप्रेस किया गया है या नहीं.

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
• अपने Glitch के लाइव वर्शन पर Lighthouse परफ़ॉर्मेंस ऑडिट (Lighthouse > विकल्प > परफ़ॉर्मेंस) चलाएं और पुष्टि करें कि इमेज को बेहतर तरीके से एन्कोड किया गया ऑडिट पास हो गया.

हो गया! आपने अपने पेज पर इमेज को बेहतर तरीके से कंप्रेस करने के लिए, Imagemin का इस्तेमाल किया है.