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

Michael DiBlasio

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

ऐप्लिकेशन का स्क्रीनशॉट

मापें

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

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

पिछले नेटवर्क पेलोड को छोटा और कंप्रेस करें कोडलैब (कोड बनाना सीखना), हमने main.js का साइज़ 225 केबी से घटाकर 61.6 केबी कर दिया है. इस कोडलैब में, आपको जानें कि Brotli में मौजूद कंप्रेस करने की सुविधा की मदद से, इस बंडल के साइज़ को और कम कैसे किया जा सकता है.

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

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

  • JavaScript के लिए, gzip से 14% कम
  • एचटीएमएल के लिए gzip से 21% कम
  • सीएसएस के लिए, gzip की तुलना में 17% कम

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

Accept-Encoding: gzip, deflate, br

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

नेटवर्क पैनल

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

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

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

फ़ायदे

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

नुकसान

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

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

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 को इंपोर्ट किया जा सकता है और express.static का इस्तेमाल किया जा सकता है. इसमें सभी स्टैटिक एचटीएमएल, JS, और सीएसएस फ़ाइलें लोड करने के लिए मिडलवेयर public/directory (और उन फ़ाइलों को हर बिल्ड के साथ webpack के ज़रिए बनाया जाता है).

यह पक्का करने के लिए कि सभी ऐसेट को ब्रोटली का इस्तेमाल करके कंप्रेस किया जाए, ताकि वे हर बार 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'));

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

डाइनैमिक Brotli कंप्रेशन के साथ बंडल का साइज़

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

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

स्टैटिक कंप्रेशन के पीछे का आइडिया यह है कि एसेट को कंप्रेस करके आगे सेव किया जाए समय की है.

फ़ायदे

  • उच्च संपीड़न स्तर के कारण लेटेंसी अब चिंता का विषय नहीं है. कुछ नहीं फ़ाइलों को कंप्रेस करने के लिए तुरंत होने की ज़रूरत होती है, क्योंकि अब उन्हें फ़ेच किया जा सकता है सकता है.

नुकसान

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

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

स्टैटिक कंप्रेशन में फ़ाइलों को समय से पहले कंप्रेस करना शामिल होता है. इसलिए, 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 से मैच करने वाली सभी ऐसेट (यानी कि इन पर खत्म होने वाली JavaScript ऐसेट .js) प्रोसेस हो गए हैं.

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

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

  1. टूल बटन पर क्लिक करें.
  2. कंसोल बटन पर क्लिक करें.
  3. कंसोल में, public में बदलने के लिए इन निर्देशों को चलाएं डायरेक्ट्री पर जाकर इसकी सभी फ़ाइलें देख सकते हैं:
cd public
ls -lh
बंडल का साइज़, स्टैटिक Brotli कंप्रेशन के साथ

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

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

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

ऐसा हो सकता है कि कुछ ब्राउज़र में Brotli कंप्रेशन की सुविधा न मिले. इसलिए, पुष्टि करें कि brotli की जांच करके, Brotli-कंप्रेस की गई फ़ाइल को वापस दिखाने से पहले 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'));

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

बंडल का साइज़ 53.1 केबी (225 केबी से)

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

नतीजा

इस कोडलैब से पता चलता है कि brotli किस तरह आपके ऐप्लिकेशन की परफ़ॉर्मेंस को कम कर सकता है साइज़. जहां समर्थित हो, वहां brotli gzip.