Images और assets

Asset handling strategies

Webpack 5 में built-in asset type handling है। 'asset' का उपयोग करके automatically छोटी files को inline करने या बड़ी files को emit करने के बीच choose करें। छोटी images base64 encoded inline होती हैं।

Asset handling को configure करें

Inline बनाम external assets के लिए size thresholds set करें।

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KB threshold
          }
        }
      }
    ]
  }
};

Output:

Images under 8KB are base64 inlined; larger images emitted as files

Image optimization मायने रखता है

Bundling से पहले images को compress करने के लिए image-webpack-loader use करें। WebP और AVIF formats size को further reduce करते हैं।

त्वरित जाँच

त्वरित जाँच: Images को कब inline करना चाहिए?

• सभी images को हमेशा inline करना चाहिए।
• Compression के लिए बड़ी images को inline करना चाहिए।
• कभी नहीं, क्योंकि inlining build तोड़ देता है।
• जब files छोटी हों, ताकि अतिरिक्त HTTP requests बच सकें।