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

माइकल डिब्लासियो

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में इस ग्लिच को खोलें.

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

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

दूरी मापें

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

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

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

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

ब्रॉटली कंप्रेशन

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

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

• JavaScript के लिए gzip से 14% कम
• एचटीएमएल के लिए gzip से 21% कम
• सीएसएस के लिए gzip से 17% कम

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

Accept-Encoding: gzip, deflate, br

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

ब्रॉटली को चालू करना

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

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

फ़ायदे

• एसेट के सेव किए गए, कंप्रेस किए गए वर्शन बनाने और उन्हें अपडेट करने की ज़रूरत नहीं होती.
• खास तौर पर, डाइनैमिक तरीके से जनरेट किए गए वेब पेजों के लिए, प्रोसेसिंग मोड को तेज़ी से कंप्रेस किया जाता है.

नुकसान

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

नोड/एक्सप्रेशन के साथ डाइनैमिक कंप्रेशन

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

var express = require('express');

var app = express();

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

var listener = app.listen(process.env.PORT, function() {
  console.log('Your app is listening on port ' + listener.address().port);
});

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

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

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

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

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

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

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

// compress all requests
app.use(shrinkRay());

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

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

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

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

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

स्टैटिक कंप्रेशन के पीछे का मकसद यह है कि एसेट को पहले से कंप्रेस करके सेव कर लिया जाए.

फ़ायदे

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

नुकसान

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

नोड/एक्सप्रेशन और वेबपैक के साथ स्टैटिक कंप्रेशन

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

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

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

किसी भी दूसरे वेबपैक प्लगिन की तरह, इसे कॉन्फ़िगरेशन फ़ाइल में इंपोर्ट करें, 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 कर दिया जाएगा.

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

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

cd public
ls -lh

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

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

var express = require('express');

var 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 पर सेट होता है.
• MIME टाइप बताने के लिए Content-Type हेडर को application/javascript; charset=UTF-8 पर सेट किया गया है.
• आखिर में, next() पक्का करता है कि क्रम किसी भी कॉलबैक के साथ जारी रहे, जो कि अगला हो सकता है.

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

var express = require('express');

var 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 आपके ऐप्लिकेशन के कुल साइज़ को कैसे कम कर सकता है. अगर यह सुविधा काम करती है, तो gzip के मुकाबले brotli, ज़्यादा असरदार कंप्रेशन एल्गोरिदम है.

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