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

Katie Hempenius
Katie Hempenius
X

Imagemin Webpack प्लगिन सेट अप करें

इस Glitch में पहले से webpack, webpack-cli, और imagemin-webpack-plugin. Imagemin के लिए कॉन्फ़िगरेशन जोड़ने के लिए, आपको की आवश्यकता होगी अपनी webpack.config.js फ़ाइल में बदलाव करने के लिए.

इस प्रोजेक्ट के लिए मौजूदा webpack.config.js, यहां से इमेज कॉपी कर रहा है images/ डायरेक्ट्री को dist/ डायरेक्ट्री में सेव किया गया है, लेकिन कंप्रेस किए जा रहे थे.

  • प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  • सबसे पहले, सबसे ऊपर यह कोड जोड़कर Imagemin प्लगिन का एलान करें 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()
  ]
}

अब आपके पास एक webpack कॉन्फ़िगरेशन है, जो Imagemin का इस्तेमाल करके इमेज को कंप्रेस करता है.

Webpack चलाएं

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

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

  • Webpack को फिर से चलाएं, लेकिन इस बार प्रोडक्शन मोड में:
webpack --config webpack.config.js --mode production

इस दौरान, webpack एक चेतावनी दिखाता है. इससे आपको पता चलता है कि आपकी PNG फ़ाइल फ़ाइलों के साइज़ को थोड़ा कंप्रेस करने के बावजूद, ये सुझाई गई साइज़ की सीमा से ज़्यादा होती हैं. (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 कंप्रेशन के लिए एक कंप्रेशन क्वालिटी तय करने देता है. हमने इस 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 को JPGs को कंप्रेस करने के लिए कहता है, जिसकी क्वालिटी 50 है (0 सबसे ख़राब है; 100 सबसे अच्छा है) के लिए Mozjpeg प्लगिन का इस्तेमाल करें.

यदि आप किसी ऐसे प्लग इन के लिए सेटिंग जोड़ रहे हैं जो इसका डिफ़ॉल्ट प्लग इन है 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 को फिर से चलाएं और नतीजों की पुष्टि करें

  • कंसोल में, Webpack को फिर से चलाएं:
webpack --config webpack.config.js --mode production

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

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

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

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

'इमेज को बेहतर तरीके से एन्कोड करें' पास किया जा रहा है लाइटहाउस में ऑडिट

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