gzip की मदद से नेटवर्क पेलोड कम करें और कंप्रेस करें

Houssein Djirdeh

यह कोडलैब, JavaScript को छोटा करने और कंप्रेस करने, दोनों के बारे में जानकारी देता है निम्नलिखित ऐप्लिकेशन के लिए बंडल ऐप्लिकेशन के अनुरोध का साइज़.

मापें

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

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .

यह ऐप्लिकेशन, "इस्तेमाल नहीं किया गया कॉन्टेंट हटाएं" सेक्शन में भी शामिल था code" कोडलैब की मदद से, अपने पसंदीदा कोड के लिए वोट किया जा सकता है बिल्ली का बच्चा. 🐈

अब देखें कि यह ऐप्लिकेशन कितना बड़ा है:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. कैश मेमोरी बंद करें चेकबॉक्स चुनें.
4. ऐप्लिकेशन को फिर से लोड करें.

हालांकि, "इस्तेमाल नहीं किया गया कोड हटाएं" में काफ़ी बदलाव हुए हैं कोडलैब का साइज़ छोटा करने के लिए, 225 केबी का साइज़ काफ़ी बड़ा होना चाहिए.

छोटा करना

कोड के नीचे दिए गए ब्लॉक पर गौर करें.

function soNice() {
  let counter = 0;

  while (counter < 100) {
    console.log('nice');
    counter++;
  }
}

अगर यह फ़ंक्शन अपनी किसी फ़ाइल में सेव किया जाता है, तो फ़ाइल का साइज़ 112 B (बाइट).

अगर सभी खाली सफ़ेद जगह को हटा दिया जाता है, तो मिलने वाला कोड ऐसा दिखेगा:

function soNice(){let counter=0;while(counter<100){console.log("nice");counter++;}}

अब फ़ाइल का साइज़ करीब 83 B हो जाएगा. यदि इसे कम करने से कोई और उलझन हो जाए, चर नाम की लंबाई और कुछ एक्सप्रेशन को संशोधित करते हुए, अंतिम कोड इस तरह दिखेगा:

function soNice(){for(let i=0;i<100;)console.log("nice"),i++}

फ़ाइल का साइज़ अब 62 B हो जाएगा.

हर चरण के साथ, कोड को पढ़ना मुश्किल होता जा रहा है. हालांकि, ब्राउज़र का JavaScript इंजन इनमें से हर एक शब्द को एक ही तरीके से समझता है. कॉन्टेंट बनाने इस तरह से कोड को अस्पष्ट बनाने से छोटी फ़ाइल को साइज़. 112 B वाकई में शुरुआत करने के लिए ज़्यादा नहीं था, लेकिन फिर भी वहां 50% कम किया गया है!

इस ऐप्लिकेशन में, webpack वर्शन 4 का इस्तेमाल मॉड्यूल बंडलर. इसके खास वर्शन को package.json में देखा जा सकता है.

"devDependencies": {
  //...
  "webpack": "^4.16.4",
  //...
}

वर्शन 4, प्रोडक्शन मोड के दौरान बंडल को डिफ़ॉल्ट रूप से छोटा कर देता है. यह Terser के लिए, प्लगिन के लिए TerserWebpackPlugin करें. Treser एक लोकप्रिय टूल है, जिसका इस्तेमाल JavaScript कोड को कंप्रेस करने के लिए किया जाता है.

यह जानने के लिए कि छोटा किया गया कोड कैसा दिखता है, DevTools नेटवर्क पैनल में मौजूद रहने के दौरान, main.bundle.js. अब जवाब टैब.

जवाब के मुख्य हिस्से में, यह कोड आखिरी रूप में दिखता है, जिसे छोटा किया गया है, और अलग किया गया है. यह जानने के लिए कि अगर बंडल को छोटा नहीं किया गया, तो वह कितना बड़ा हो सकता था, खोलें webpack.config.js और mode का कॉन्फ़िगरेशन अपडेट करें.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

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

यह बहुत बड़ा अंतर है! 😅

जारी रखने से पहले, यहां किए गए बदलावों को पहले जैसा करना न भूलें.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

कोड को छोटा करने की प्रोसेस को ऐप्लिकेशन में शामिल करना, टूल पर निर्भर करता है जिनका इस्तेमाल किया जाता है:

• अगर webpack v4 या इससे नए वर्शन का इस्तेमाल किया जाता है, तो कुछ और करने की ज़रूरत नहीं है क्योंकि प्रोडक्शन मोड में कोड को डिफ़ॉल्ट रूप से छोटा किया जाता है. 👍
• अगर Webpack के पुराने वर्शन का इस्तेमाल किया जा रहा है, तो TerserWebpackPlugin को इंस्टॉल और शामिल करें बनाने की प्रक्रिया में शामिल कर सकते हैं. दस्तावेज़ इसे विस्तार से बताता है.
• छोटा करने से जुड़े दूसरे प्लगिन भी मौजूद हैं और उनका इस्तेमाल किया जा सकता है, जैसे कि BabelMinifyWebpackPlugin और ClosureCompilerPlugin करते हैं.
• अगर कोई मॉड्यूल बंडलर इस्तेमाल नहीं किया जा रहा है, तो Terser का इस्तेमाल करें का इस्तेमाल सीएलआई टूल के तौर पर कर सकते हैं या इसे सीधे डिपेंडेंसी के तौर पर शामिल कर सकते हैं.

संपीड़न

हालांकि, "कंप्रेशन" शब्द का इस्तेमाल कभी-कभी इसका इस्तेमाल यह समझाने के लिए किया जाता है कि कोड कैसे होता है कम करने की प्रक्रिया के दौरान कम हो जाती है, तो यह असल में का मतलब है.

कंप्रेशन आम तौर पर, उस कोड को कहते हैं जिसे डेटा का इस्तेमाल करके बदला गया है कंप्रेशन एल्गोरिदम. काट-छांट करने के उलट, जो पूरी तरह से सटीक होता है तो मान्य कोड, कंप्रेस किए गए कोड का इस्तेमाल करने से पहले डिकंप्रेस किया गया होना चाहिए.

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

• General, ऐसे सामान्य हेडर दिखाता है जो अनुरोध के पूरे जवाब के लिए काम के होते हैं इंटरैक्शन.
• रिस्पॉन्स हेडर, असल जवाब के लिए खास तौर पर बने हेडर की सूची दिखाता है को भी सेव करता है.
• अनुरोध हेडर, उन हेडर की सूची दिखाता है जो अनुरोध में क्लाइंट.

Request Headers में accept-encoding हेडर पर एक नज़र डालें.

ब्राउज़र, accept-encoding का इस्तेमाल यह बताने के लिए करता है कि कौनसा कॉन्टेंट फ़ॉर्मैट या कंप्रेशन एल्गोरिदम की सुविधा देता है. कई टेक्स्ट-कंप्रेशन वाले एल्गोरिदम मिलते हैं, लेकिन सिर्फ़ तीन एल्गोरिदम HTTP नेटवर्क अनुरोधों के संपीड़न (और डिकंप्रेशन) के लिए यहां समर्थित है:

• Gzip (gzip): सबसे ज़्यादा इस्तेमाल किया जाने वाला कंप्रेशन के फ़ॉर्मैट में होगी. यह Deflate के टॉप पर बनता है जो सभी मौजूदा ब्राउज़र में काम करता है.
• कम करें (deflate): आम तौर पर इस्तेमाल नहीं किया जाता.
• Brotli (br): नया कंप्रेशन हैं जो कंप्रेशन अनुपात को और बेहतर बनाता है. इससे नतीजे पाने के लिए, और तेज़ी से पेज लोड भी होते हैं. यह ज़्यादातर ब्राउज़र के नए वर्शन.

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

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

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

फ़ायदे

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

नुकसान

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

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

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

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

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

"devDependencies": {
  //...
  "compression": "^1.7.3"
},

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

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

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

//...

const app = express();

app.use(compression());

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

//...

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

225 केबी से 61.6 केबी तक! Response Headers में, एक content-encoding हेडर दिखाता है कि सर्वर gzip के साथ कोड में बदली गई इस फ़ाइल को भेज रहा है.

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

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

फ़ायदे

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

नुकसान

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

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

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

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

"devDependencies": {
  //...
  "compression-webpack-plugin": "^1.1.11"
},

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

const path = require("path");

//...

const CompressionPlugin = require("compression-webpack-plugin");

साथ ही, इसे plugins कलेक्शन में शामिल करें:

module.exports = {
  //...
  plugins: [
    //...
    new CompressionPlugin()
  ]
}

डिफ़ॉल्ट रूप से, प्लगिन gzip का इस्तेमाल करके बिल्ड फ़ाइलों को कंप्रेस करता है. एक नज़र डालें दस्तावेज़ में ताकि दूसरे एल्गोरिदम का इस्तेमाल करने या शामिल करने/बाहर रखने के विकल्पों को जोड़ा जा सके कुछ फ़ाइलें.

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

• टूल बटन पर क्लिक करें.
• कंसोल बटन पर क्लिक करें.
• कंसोल में, public में बदलने के लिए इन निर्देशों को चलाएं डायरेक्ट्री पर जाकर इसकी सभी फ़ाइलें देख सकते हैं:

cd public
ls

बंडल का gzip किया गया वर्शन, main.bundle.js.gz अब यहां इस तरह सेव किया गया है करते हैं. CompressionPlugin, डिफ़ॉल्ट रूप से index.html को भी कंप्रेस कर देता है.

इसके बाद, सर्वर को ये gzip करने के लिए कहें फ़ाइलें शामिल की जाएंगी. यह किया जा सकता है पहले server.js में नया रूट तय करके, फ़ाइलें express.static.

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

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  next();
});

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

//...

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

• '*.js' को पहले आर्ग्युमेंट के तौर पर सेट करने का मतलब है कि यह हर क्वेरी के लिए काम करता है एक JS फ़ाइल फ़ेच करने के लिए ट्रिगर किया गया एंडपॉइंट.
• कॉलबैक में, .gz अनुरोध के यूआरएल और Content-Encoding रिस्पॉन्स हेडर को gzip पर सेट किया गया है.
• आखिर में, next() पक्का करता है कि क्रम किसी भी कॉलबैक पर जारी रहे यह अगला लक्ष्य हो सकता है.

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

पहले की तरह ही, बंडल के साइज़ में भारी कमी!

नतीजा

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