👊🏻 🧑🏾‍🤝‍🧑🏼 🙆🏼 "जैकाल": सीमा को निचोड़ें 🤞🏿 🛏️ 😲

नमस्ते! मैं तान्याफ़ बिजनेस में प्लेटफ़ॉर्म टीम का नेता वान्या हूं।

मेरा पसंदीदा शगल देवटूल टैब को खोलना और जाँचना है कि वेबसाइट की कलाकृतियों का वजन कितना है। इस लेख में मैं आपको बताऊंगा कि कैसे हमने साइट कोड को बदले बिना एक दिन में प्लेटफ़ॉर्म फ्रंट-एंड टीम की मदद से आवेदन का वजन 30% कम कर दिया। कोई चाल और पंजीकरण नहीं - केवल नगनेक्स, डॉकटर और नोड.जेएस (वैकल्पिक)।

क्यों

अब फ्रंट-एंड एप्लिकेशन बहुत वजन करते हैं। एकत्रित कलाकृतियों का वजन 2-3 एमबी, या इससे भी अधिक हो सकता है। हालाँकि, संपीड़न एल्गोरिदम उपयोगकर्ताओं की सहायता के लिए आते हैं।

कुछ समय पहले तक, हमने केवल Gzip का उपयोग किया था, जिसे 1992 में दुनिया में वापस लाया गया था। यह संभवतः वेब पर सबसे लोकप्रिय संपीड़न एल्गोरिदम है, यह IE 6 से ऊपर के सभी ब्राउज़रों द्वारा समर्थित है ।

आपको याद दिला दूं कि Gzip का संपीड़न स्तर 1 से 9 तक (अधिक कुशल होना) सीमा में भिन्न होता है, और आप इसे या तो फ्लाई या स्टेटिक रूप से कंप्रेस कर सकते हैं।

"फ्लाई पर" (गतिशील रूप से) - कलाकृतियों को विधानसभा के बाद प्राप्त फॉर्म में संग्रहीत किया जाता है, ग्राहक को डिलीवरी के दौरान उनका संपीड़न होता है। हमारे मामले में, नग्नेक्स स्तर पर।
स्टेटिक - कलाकृतियों को असेंबली के बाद संकुचित किया जाता है, और HTTP सर्वर उन्हें क्लाइंट को "जैसा है" भेजता है।

जाहिर है, पहले विकल्प में प्रत्येक अनुरोध के लिए अधिक सर्वर संसाधनों की आवश्यकता होती है। दूसरा विधानसभा और आवेदन की तैयारी के चरण में है।

हमारा सीमांत चतुर्थ स्तर तक गतिशील रूप से संकुचित हो गया था। मैं एक संपीड़ित विरूपण साक्ष्य और मूल के बीच अंतर प्रदर्शित करूंगा:

संपीड़न स्तर	विरूपण साक्ष्य वजन, Kb	संपीड़न समय, एमएस
0	2522	-
1	732	42
2	702	44
3	683	48
4	636	55
5	612	65
6	604	77
7	604	80
8	603	104
9	601	102

आप देख सकते हैं कि चौथे स्तर पर भी कलाकृतियों का आकार 4 गुना कम हो जाता है! और चौथे स्तर और नौवें के बीच का अंतर 35 Kb है, जो कि मूल का 1.3% है, लेकिन संपीड़न समय 2 गुना अधिक है।

और हाल ही में, हमने सोचा: ब्रेटली पर स्विच क्यों नहीं? हाँ, और संपीड़न के सबसे शक्तिशाली स्तर पर!

वैसे, यह एल्गोरिदम 2015 में Google द्वारा पेश किया गया था और इसमें 11 संपीड़न स्तर हैं। वहीं, ब्रेटली का चौथा स्तर गज़िप में नौवें की तुलना में अधिक प्रभावी है। मैं प्रेरित हो गया और जल्दी से ब्रेटली एल्गोरिथ्म के साथ कलाकृतियों को संपीड़ित करने के लिए कोड फेंक दिया। परिणाम नीचे प्रस्तुत किए गए हैं:

संपीड़न स्तर	विरूपण साक्ष्य वजन, Kb	संपीड़न समय, एमएस
0	2522	-
1	662	128
2	612	155
3	601	156
4	574	202
5	526	227
6	512	249
7	501	303
8	496	359
9	492	420
10	452	3708
11	446	8257

हालांकि, तालिका से पता चलता है कि पहले ब्रेटली संपीड़न स्तर भी Gzip में नौवें स्तर से अधिक समय लेता है। और अंतिम स्तर - 8.3 सेकंड जितना! इसने मुझे सतर्क कर दिया।

दूसरी ओर, परिणाम स्पष्ट रूप से प्रभावशाली है। अगला, मैंने nginx को कंप्रेशन ट्रांसफर करने की कोशिश की - प्रलेखन । सब कुछ बेहद सरल निकला:

brotli on; brotli_comp_level 11; brotli_types text/plain text/css application/javascript;

उन्होंने डॉकटर छवि को इकट्ठा किया, कंटेनर लॉन्च किया और बहुत आश्चर्यचकित हुए:

मेरी फ़ाइल का डाउनलोड समय दस गुना बढ़ गया - 100 एमएस से 5 सेकंड तक! आवेदन का उपयोग करना असंभव हो गया है।

प्रलेखन का गहराई से अध्ययन करने के बाद, मुझे एहसास हुआ कि आप सांख्यिकीय रूप से वितरित कर सकते हैं। मैंने पहले से लिखी गई स्क्रिप्ट का उपयोग किया, उसी कलाकृतियों को संकुचित किया, इसे एक कंटेनर में रखा, और इसे लॉन्च किया। डाउनलोड बार वापस सामान्य करने के लिए - जीत! हालाँकि, यह बहुत जल्दबाजी होगी, क्योंकि इस प्रकार के संपीड़न का समर्थन करने वाले ब्राउज़रों का अनुपात लगभग 80% है ।

इसका मतलब है कि आपको पिछड़ी संगतता बनाए रखना चाहिए, जबकि इसके अतिरिक्त आप Gzip के सबसे प्रभावी स्तर का उपयोग करना चाहते हैं। तो एक फ़ाइल संपीड़न उपयोगिता बनाने के लिए विचार आया, जिसे बाद में "जैकल" नाम मिला।

हमें क्या चाहिए?

Nginx, Docker और Node.js, हालाँकि आप चाहें तो bash का उपयोग भी कर सकते हैं।
Nginx के साथ, लगभग सब कुछ स्पष्ट है:

 brotli off; brotli_static on; gzip_static on;

लेकिन उन अनुप्रयोगों के साथ क्या करना है जो अभी तक डॉकटर छवि को अपडेट करने में कामयाब नहीं हुए हैं? सही, पिछड़े संगतता जोड़ें:

 gzip on; gzip_level 4; gzip_types text/plain text/css application/javascript;

मैं ऑपरेशन के सिद्धांत की व्याख्या करूंगा:

प्रत्येक अनुरोध पर, क्लाइंट स्वीकार-एन्कोडिंग हेडर भेजता है, जो अल्पविराम द्वारा अलग किए गए समर्थित संपीड़न एल्गोरिदम को सूचीबद्ध करता है। आमतौर पर यह अपस्फीति, गज़िप, ब्र।

यदि क्लाइंट के पास ब्र में लाइन है, तो nginx एक्सटेंशन .br के साथ फ़ाइलों की तलाश करता है, अगर ऐसी कोई फाइलें नहीं हैं और क्लाइंट Gzip का समर्थन करता है, तो यह .gz की तलाश करता है। यदि ऐसी कोई फ़ाइलें नहीं हैं, तो यह "मक्खी पर" हिल जाएगा और इसे चौथे स्तर के संपीड़न के साथ वापस दे देगा।

यदि क्लाइंट किसी भी प्रकार के संपीड़न का समर्थन नहीं करता है, तो सर्वर अपने मूल रूप में कलाकृतियों को जारी करेगा।

हालांकि, एक समस्या उत्पन्न हुई: हमारी नगनेक्स डॉकटर छवि ब्रेटली मॉड्यूल का समर्थन नहीं करती है। एक आधार के रूप में, मैंने तैयार डॉकटर छवि ली।

एक परियोजना में "पैकिंग" नग्नेक्स के लिए डॉकरीफाइल

 FROM fholzer/nginx-brotli #      RUN rm -rf /usr/share/nginx/html/ #      COPY app/nginx /etc/nginx/conf.d/ #      COPY dist/ /usr/share/nginx/html/ #  CMD nginx -c /etc/nginx/conf.d/nginx.conf

हमने ट्रैफ़िक संतुलन का अनुमान लगाया, लेकिन कलाकृतियों को कहाँ से लाया जाए? यह वह जगह है जहाँ जैकाल बचाव के लिए आता है।

द जैकल

यह आपके एप्लिकेशन के स्टैटिक्स को संपीड़ित करने के लिए एक उपयोगिता है ।

अब ये तीन नोड.जेएस स्क्रिप्ट हैं जो नोड के साथ डॉक इमेज में लिपटे हुए हैं: अल्पाइन। स्क्रिप्ट पर चलते हैं।

आधार-कंप्रेसर - एक स्क्रिप्ट जो मूल संपीड़न तर्क को लागू करती है।

इनपुट तर्क:

संपीड़न फ़ंक्शन - कोई भी जावास्क्रिप्ट फ़ंक्शन, आप अपने स्वयं के संपीड़न एल्गोरिदम को लागू कर सकते हैं।
संपीड़न पैरामीटर - स्थानांतरित फ़ंक्शन के लिए आवश्यक मापदंडों के साथ एक वस्तु।
विस्तार - संपीड़न कलाकृतियों का विस्तार। एक पीरियड कैरेक्टर से शुरू होना चाहिए।

gzip.js - जीज़िप फ़ंक्शन के साथ बेस-कंप्रेसर कॉल के साथ एक फ़ाइल zlib पैकेज से पारित हुई और संपीड़न के नौवें स्तर का संकेत है।

Brotli.js - एक बेस-कंप्रेसर कॉल के साथ ब्रेटली फ़ंक्शन के साथ फ़ाइल उसी npm पैकेज से पारित हुई और संपीड़न के 11 वें स्तर का संकेत देती है।

जैकल छवि का निर्माण करने वाले डॉकरीफाइल

 FROM node:8.12.0-alpine #     COPY scripts scripts #  package.json  package-lock.json   COPY package*.json scripts/ #      WORKDIR scripts #    #    node_modules/   #  ,     RUN npm ci #     CMD node gzip.js | node brotli.js

हमें पता चला कि यह कैसे काम करता है, अब आप सुरक्षित रूप से चला सकते हैं:

 docker run \ -v $(pwd)/dist:/scripts/dist \ -e 'dirs=["dist/"]' \ -i mngame/shakal

-v $ (pwd) / dist: / script / dist - निर्दिष्ट करें कि कौन सी स्थानीय निर्देशिका कंटेनर में निर्देशिका (माउंट के लिए लिंक) पर विचार करें। स्क्रिप्ट निर्देशिका निर्दिष्ट करना आवश्यक है, क्योंकि यह कंटेनर के अंदर काम कर रहा है।
-e 'dirs = ["dist /"] - पर्यावरण पैरामीटर dirs निर्दिष्ट करें - एक ऐसी लाइन जो स्क्रिप्ट के अंदर निर्देशिकाओं का वर्णन करती है / जो कि संपीड़ित होगी।
-i mngame / shakal - docker.io के साथ एक छवि निर्दिष्ट करना।

निर्दिष्ट निर्देशिकाओं में, स्क्रिप्ट पुन: निर्दिष्ट एक्सटेंशन .js, .json, .html, .css के साथ सभी फ़ाइलों को संक्षिप्त करती है और एक्सटेंशन .br और .gz के साथ फ़ाइलों को सहेजती है। हमारे प्रोजेक्ट पर, 6 एमबी के बारे में सभी कलाकृतियों के वजन के साथ इस प्रक्रिया में लगभग दो मिनट लगते हैं।

इस बिंदु पर, और शायद पहले भी, आपने सोचा होगा: “क्या कर रहे हो? कौन सा नोड? क्यों न सिर्फ अपने आप को दो पैकेज जोड़ें। प्रोजेक्ट के पैकेज में और सीधे पोस्ट-कॉल पर कॉल करें? "

मेरे लिए यह देखना बहुत दर्दनाक है, जब सीआई में लिंटर चलाने के लिए, परियोजना स्वयं के लिए 100+ पैकेज स्थापित करती है, जिसके लिए उसे लाइनिंग स्टेज पर अधिकतम 10 की आवश्यकता होती है। यह एजेंट का समय, आपका समय, आखिरकार, बाजार का समय है।

कर्ता के मामले में, हमें एक पूर्व-इकट्ठी छवि मिलती है जिसमें संपीड़न के लिए आवश्यक सब कुछ स्थापित होता है। यदि आपको अब कुछ भी संपीड़ित करने की आवश्यकता नहीं है - संपीड़ित न करें। एक लिंट की आवश्यकता है - इसे केवल चलाएं, परीक्षणों की आवश्यकता है - केवल उन्हें चलाएं। इसके अलावा, हमें जैकल का एक अच्छा संस्करण मिलता है: हमें प्रत्येक परियोजना में इसकी निर्भरता को अपडेट करने की आवश्यकता नहीं है - बस एक नया संस्करण जारी करें, और परियोजना के लिए नवीनतम टैग का उपयोग करें।

परिणाम:

कलाकृतियों का आकार 636 Kb से बदलकर 446 Kb हो गया है।
प्रतिशत का आकार 30% तक कम हो गया।
डाउनलोड का समय 10-12% कम हो गया।
लेख के आधार पर अपघटन का समय समान रहता है।

कुल मिलाकर

आप अपने उपयोगकर्ताओं को अभी, अगले PR द्वारा सही में मदद कर सकते हैं: असेंबली के बाद एक कदम जोड़ें - "जैकल" संपीड़न, और फिर अपने कंटेनर में कलाकृतियों को वितरित करें। आधे घंटे के बाद, आपके उपयोगकर्ता थोड़ा बेहतर महसूस करते हैं।

हमने फ्रंट-एंड के वजन को 30% तक कम करने में कामयाब रहे - आप सफल होंगे! सभी आसान साइटें।

ssylochki:

डॉकटर उपयोगिता छवि
उपयोगिता भंडार
UPD: kellas के लिए धन्यवाद, CLI संस्करण एक npm पैकेज के रूप में दिखाई दिया