Brotli की मदद से, नेटवर्क पेलोड को छोटा और कंप्रेस करें

Michael DiBlasio

सलाह: इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में यह Glitch डेमो खोलें.

ध्यान दें: यह कोडलैब, Chrome DevTools का इस्तेमाल करता है. अगर आपके सिस्टम में Chrome मौजूद नहीं है, तो Chrome डाउनलोड करें.

यह कोडलैब, नेटवर्क पेलोड को छोटा और कंप्रेस करना कोडलैब का एक्सटेंशन है. इसमें यह माना गया है कि आपको कंप्रेस करने के बुनियादी कॉन्सेप्ट के बारे में पता है. gzip जैसे अन्य कंप्रेशन एल्गोरिदम की तुलना में, इस कोडलैब में यह बताया गया है कि Brotli कंप्रेशन (br) से, कंप्रेशन रेशियो और आपके ऐप्लिकेशन के कुल साइज़ को और कैसे कम किया जा सकता है.

मापें

ध्यान दें: इस ऐप्लिकेशन में webpack का इस्तेमाल किया जाता है. इसलिए, कोड में किए गए किसी भी बदलाव से एक नया बिल्ड ट्रिगर होगा. इसमें कुछ सेकंड लग सकते हैं. यह प्रोसेस पूरी होने के बाद, आपको ऐप्लिकेशन में बदलाव दिखेंगे.

ऑप्टिमाइज़ेशन जोड़ने से पहले, ऐप्लिकेशन की मौजूदा स्थिति का विश्लेषण करना हमेशा एक अच्छा आइडिया होता है.

1. प्रोजेक्ट में बदलाव करने के लिए, Remix to Edit पर क्लिक करें.
2. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें को दबाएं. इसके बाद, फ़ुलस्क्रीन को दबाएं.

पिछले Minify and compress network payloads codelab में, हमने main.js का साइज़ 225 केबी से घटाकर 61.6 केबी कर दिया था. इस कोडलैब में, आपको पता चलेगा कि Brotli कंप्रेशन की मदद से, इस बंडल के साइज़ को और कैसे कम किया जा सकता है.

Brotli कंप्रेशन

चेतावनी: कई होस्टिंग प्लैटफ़ॉर्म, सीडीएन, और रिवर्स प्रॉक्सी सर्वर, ऐसेट को डिफ़ॉल्ट रूप से कंप्रेस करके कोड में बदलते हैं या आपको उन्हें आसानी से कॉन्फ़िगर करने की सुविधा देते हैं. अगर आपका होस्टिंग प्लैटफ़ॉर्म Brotli के साथ काम करता है, तो हो सकता है कि आपको अपनी ऐसेट को Brotli की मदद से कंप्रेस करने के लिए, सर्वर को सेट अप करने की ज़रूरत न पड़े. इस ट्यूटोरियल में इसके बारे में बताया गया है.

Brotli, कॉन्टेंट को कंप्रेस करने के लिए नया एल्गोरिदम है. यह gzip के मुकाबले, टेक्स्ट को कंप्रेस करने के बेहतर नतीजे दे सकता है. CertSimple के मुताबिक, Brotli की परफ़ॉर्मेंस इस तरह है:

• JavaScript के लिए, gzip से 14% छोटा
• एचटीएमएल के लिए, gzip से 21% छोटा
• gzip के मुकाबले, सीएसएस के लिए 17% छोटा

Brotli का इस्तेमाल करने के लिए, आपके सर्वर को एचटीटीपीएस के साथ काम करना चाहिए. Brotli, सभी मॉडर्न ब्राउज़र में काम करता है. Brotli के साथ काम करने वाले ब्राउज़र, Accept-Encoding हेडर में br को शामिल करेंगे:

Accept-Encoding: gzip, deflate, br

Chrome डेवलपर टूल के नेटवर्क टैब में Content-Encoding फ़ील्ड (Command+Option+I या Ctrl+Alt+I) का इस्तेमाल करके, यह पता लगाया जा सकता है कि किस कंप्रेशन एल्गोरिदम का इस्तेमाल किया गया है:

Brotli को चालू करने का तरीका

Brotli-एन्कोडेड रिसॉर्स भेजने के लिए वेब सर्वर को सेट अप करने का तरीका, इस बात पर निर्भर करता है कि आपको उन्हें किस तरह एन्कोड करना है. आपके पास अनुरोध के समय (डाइनैमिक) Brotli की मदद से, संसाधनों को डाइनैमिक तौर पर कंप्रेस करने का विकल्प होता है. इसके अलावा, उन्हें पहले से एन्कोड किया जा सकता है, ताकि उपयोगकर्ता के अनुरोध करने पर वे पहले से कंप्रेस हों (स्टैटिक).

डाइनैमिक कंप्रेशन

डाइनैमिक कंप्रेशन में, ऐसेट को ब्राउज़र से अनुरोध मिलने पर तुरंत कंप्रेस किया जाता है.

फ़ायदे

• ऐसेट के सेव किए गए कंप्रेस किए गए वर्शन बनाने और उन्हें अपडेट करने की ज़रूरत नहीं है.
• डाइनैमिक तौर पर जनरेट होने वाले वेब पेजों के लिए, ऑन-द-फ़्लाई कंप्रेस करने की सुविधा काफ़ी कारगर साबित होती है.

नुकसान

• बेहतर कंप्रेशन रेशियो पाने के लिए, फ़ाइलों को ज़्यादा लेवल पर कंप्रेस करने में ज़्यादा समय लगता है. इससे परफ़ॉर्मेंस पर असर पड़ सकता है, क्योंकि उपयोगकर्ता को ऐसेट के कंप्रेस होने का इंतज़ार करना पड़ता है. इसके बाद ही, सर्वर उन्हें भेजता है.

Node और Express की मदद से डाइनैमिक कंप्रेशन

server.js फ़ाइल, ऐप्लिकेशन को होस्ट करने वाले Node सर्वर को सेट अप करने के लिए ज़िम्मेदार होती है.

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

यह सिर्फ़ express को इंपोर्ट करता है और express.static मिडलवेयर का इस्तेमाल करके, public/directory में मौजूद सभी स्टैटिक एचटीएमएल, JS, और सीएसएस फ़ाइलों को लोड करता है. ये फ़ाइलें, हर बिल्ड के साथ webpack से बनाई जाती हैं.

यह पक्का करने के लिए कि हर बार अनुरोध किए जाने पर, सभी ऐसेट को Brotli का इस्तेमाल करके कंप्रेस किया जाए, shrink-ray मॉड्यूल का इस्तेमाल किया जा सकता है. सबसे पहले, इसे package.json में devDependency के तौर पर जोड़ें:

"devDependencies": {
  // ...
  "shrink-ray": "^0.1.3"
},

इसके बाद, इसे सर्वर फ़ाइल, server.js में इंपोर्ट करें:

const express = require('express');
const shrinkRay = require('shrink-ray');

साथ ही, express.static को माउंट करने से पहले, इसे मिडलवेयर के तौर पर जोड़ें:

// ...
const app = express();

// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));

अब ऐप्लिकेशन को फिर से लोड करें और नेटवर्क पैनल में बंडल का साइज़ देखें:

अब आपको Content-Encoding हेडर में दिखेगा कि brotli को bz से लागू किया गया है. main.bundle.js का साइज़ 225 केबी से घटकर 53.1 केबी हो गया है! यह gzip (61.6 केबी) की तुलना में ~14% छोटा है.

ध्यान दें: Brotli में क्वालिटी के 11 लेवल होते हैं. ये 0 (कोई कंप्रेशन नहीं) से लेकर 9 (ज़्यादा से ज़्यादा कंप्रेशन) तक होते हैं. 1 क्वालिटी की सेटिंग बहुत तेज़ है, लेकिन कम असरदार है. वहीं, 11 क्वालिटी की सेटिंग बहुत धीमी है, लेकिन इससे फ़ाइल का साइज़ काफ़ी कम हो जाता है. ध्यान दें कि स्टैंडर्ड Brotli लाइब्रेरी के उलट, जो डिफ़ॉल्ट रूप से क्वालिटी 11 पर सेट होती है, shrink-ray डिफ़ॉल्ट रूप से क्वालिटी 4 पर सेट होती है. यह आम तौर पर डाइनैमिक कॉन्टेंट के लिए ज़्यादा सही होती है. shrinkRay([options]) में options पैरामीटर पास करके, ब्रॉटली एल्गोरिदम के पैरामीटर में बदलाव किया जा सकता है.

स्टैटिक कंप्रेशन

स्टैटिक कंप्रेशन का मकसद, ऐसेट को कंप्रेस करना और उन्हें पहले से सेव करके रखना है.

फ़ायदे

• ज़्यादा कंप्रेस करने की वजह से होने वाली देरी अब कोई समस्या नहीं है. फ़ाइलों को कंप्रेस करने के लिए, अब कुछ भी करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि अब उन्हें सीधे फ़ेच किया जा सकता है.

नुकसान

• हर बिल्ड के साथ ऐसेट को कंप्रेस करना ज़रूरी है. अगर हाई कंप्रेशन लेवल का इस्तेमाल किया जाता है, तो बिल्ड टाइम काफ़ी बढ़ सकता है.

Node और Express के साथ webpack का इस्तेमाल करके स्टैटिक कंप्रेशन

स्टैटिक कंप्रेशन में, फ़ाइलों को पहले से कंप्रेस किया जाता है. इसलिए, वेबपैक की सेटिंग में बदलाव करके, ऐसेट को बिल्ड स्टेप के तौर पर कंप्रेस किया जा सकता है. इसके लिए, brotli-webpack-plugin का इस्तेमाल किया जा सकता है.

इसे package.json में devDependency के तौर पर जोड़कर शुरुआत करें:

"devDependencies": {
  // ...
 "brotli-webpack-plugin": "^1.1.0"
},

किसी भी अन्य webpack प्लग इन की तरह, इसे कॉन्फ़िगरेशन फ़ाइल में इंपोर्ट करें, webpack.config.js:

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

इसके बाद, इसे प्लगिन कलेक्शन में शामिल करें:

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

प्लग इन कलेक्शन में इन आर्ग्युमेंट का इस्तेमाल किया जाता है:

• asset: टारगेट ऐसेट का नाम.
• [file] की जगह, ओरिजनल ऐसेट फ़ाइल का नाम डाला जाता है.
• test: इस RegExp से मैच होने वाली सभी ऐसेट प्रोसेस की जाती हैं. जैसे, .js पर खत्म होने वाली JavaScript ऐसेट.

उदाहरण के लिए, main.js का नाम बदलकर main.js.br कर दिया जाएगा.

जब ऐप्लिकेशन फिर से लोड और रीबिल्ड होता है, तो मुख्य बंडल का कंप्रेस किया गया वर्शन बन जाता है. Glitch Console खोलें और देखें कि Node सर्वर से उपलब्ध कराई गई फ़ाइनल public/ डायरेक्ट्री में क्या है.

1. टूल बटन पर क्लिक करें.
2. कंसोल बटन पर क्लिक करें.
3. कंसोल में, public डायरेक्ट्री में जाने और उसकी सभी फ़ाइलें देखने के लिए, ये निर्देश चलाएं:

cd public
ls -lh

बंडल का Brotli कंप्रेस किया गया वर्शन, main.bundle.js.br, अब यहां भी सेव किया गया है. यह main.bundle.js के मुकाबले ~76% छोटा है (225 केबी के मुकाबले 53 केबी).

इसके बाद, सर्वर को निर्देश दें कि जब भी ओरिजनल JS वर्शन का अनुरोध किया जाए, तब वह Brotli से कंप्रेस की गई इन फ़ाइलों को भेजे. इसके लिए, express.static से फ़ाइलें दिखाने से पहले, server.js में एक नया रूट तय किया जा सकता है.

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.br';
  res.set('Content-Encoding', 'br');
  res.set('Content-Type', 'application/javascript; charset=UTF-8');
  next();
});

app.use(express.static('public'));

app.get का इस्तेमाल, सर्वर को यह बताने के लिए किया जाता है कि किसी खास एंडपॉइंट के लिए, GET अनुरोध का जवाब कैसे दिया जाए. इसके बाद, कॉलबैक फ़ंक्शन का इस्तेमाल करके यह तय किया जाता है कि इस अनुरोध को कैसे मैनेज किया जाए. यह रूट इस तरह से काम करता है:

• पहले आर्ग्युमेंट के तौर पर '*.js' तय करने का मतलब है कि यह JS फ़ाइल फ़ेच करने के लिए ट्रिगर किए गए हर एंडपॉइंट के लिए काम करता है.
• कॉलबैक में, .br को अनुरोध के यूआरएल से अटैच किया जाता है और Content-Encoding रिस्पॉन्स हेडर को br पर सेट किया जाता है.
• एमआईएमई टाइप तय करने के लिए, Content-Type हेडर को application/javascript; charset=UTF-8 पर सेट किया गया है.
• आखिर में, next() यह पक्का करता है कि सीक्वेंस, अगले किसी भी कॉलबैक तक जारी रहे.

ऐसा हो सकता है कि कुछ ब्राउज़र, Brotli कंप्रेशन के साथ काम न करें. इसलिए, Brotli से कंप्रेस की गई फ़ाइल को दिखाने से पहले, यह पक्का करें कि Brotli काम करता हो. इसके लिए, देखें कि Accept-Encoding अनुरोध के हेडर में br शामिल है या नहीं:

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    console.log(req.header('Accept-Encoding'));
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }

  next();
});

app.use(express.static('public'));

ऐप्लिकेशन के फिर से लोड होने के बाद, नेटवर्क पैनल को एक बार फिर से देखें.

हो गया! आपने अपनी ऐसेट को और कंप्रेस करने के लिए, Brotli कंप्रेशन का इस्तेमाल किया है!

नतीजा

इस कोडलैब में बताया गया है कि brotli आपके ऐप्लिकेशन के साइज़ को और कैसे कम कर सकता है. जहां brotli का इस्तेमाल किया जा सकता है वहां यह gzip के मुकाबले, कॉन्टेंट को कंप्रेस करने के लिए ज़्यादा बेहतर एल्गोरिदम है.

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