कोणीय सीएलआई बजट क्या है?
बजट कोणीय सीएलआई की कम ज्ञात विशेषताओं में से एक है। यह एक बहुत छोटा है, लेकिन एक बहुत साफ सुविधा है!
जैसे-जैसे एप्लिकेशन कार्यक्षमता में बढ़ते हैं, वे आकार में भी बढ़ते हैं। बजट कोणीय सीएलआई में एक विशेषता है जो आपको आपके आवेदन के कुछ हिस्सों को सीमाओं के भीतर रहने के लिए सुनिश्चित करने के लिए आपके कॉन्फ़िगरेशन में बजट थ्रेसहोल्ड सेट करने की अनुमति देता है - आधिकारिक दस्तावेज
या दूसरे शब्दों में, हम अपने कोणीय अनुप्रयोग को बंडल के रूप में संकलित जावास्क्रिप्ट फ़ाइलों के एक सेट के रूप में वर्णित कर सकते हैं, जो निर्माण प्रक्रिया द्वारा निर्मित होते हैं। कोणीय बजट हमें इन बंडलों के अपेक्षित आकार को कॉन्फ़िगर करने की अनुमति देता है। और अधिक, हम उन स्थितियों के लिए थ्रेसहोल्ड कॉन्फ़िगर कर सकते हैं जब हम एक चेतावनी प्राप्त करना चाहते हैं या यहां तक कि एक त्रुटि के साथ निर्माण में असफल हो जाते हैं यदि बंडल का आकार बहुत अधिक नियंत्रण से बाहर हो जाता है!
कैसे एक बजट को परिभाषित करने के लिए?
कोणीय बजट को कोणीय.जसन फ़ाइल में परिभाषित किया गया है। बजट प्रति प्रोजेक्ट परिभाषित किए जाते हैं जो समझ में आता है क्योंकि कार्यक्षेत्र के प्रत्येक ऐप की अलग-अलग जरूरतें होती हैं।
व्यावहारिक रूप से सोचकर, यह केवल निर्माण के लिए बजट को परिभाषित करने के लिए समझ में आता है। ट्री-शेकिंग और कोड मिनिमाइजेशन जैसी सभी ऑप्टिमाइज़ेशन लागू करने के बाद प्रोडक्ट बिल्ड "सही आकार" के साथ बंडल बनाता है।
उफ़, एक बिल्ड एरर! अधिकतम बंडल आकार पार हो गया था। यह एक महान संकेत है जो हमें बताता है कि कुछ गलत हुआ ...
- हमने अपनी सुविधा में प्रयोग किया होगा और ठीक से सफाई नहीं की थी
- हमारा टूलींग गलत हो सकता है और खराब ऑटो-आयात कर सकता है, या हम आयात की सुझाई गई सूची से खराब आइटम उठा सकते हैं
- हम अनुचित स्थानों पर आलसी मॉड्यूल से सामान आयात कर सकते हैं
- हमारी नई सुविधा वास्तव में बड़ी है और मौजूदा बजट में फिट नहीं होती है
पहला दृष्टिकोण: क्या आपकी फ़ाइलें gzipped हैं?
सामान्यतया, gzipped फ़ाइल में मूल फ़ाइल का आकार केवल 20% होता है, जो आपके ऐप के प्रारंभिक लोड समय को काफी कम कर सकता है। यह जांचने के लिए कि क्या आपने अपनी फ़ाइलों को जिप किया है, बस डेवलपर कंसोल के नेटवर्क टैब को खोलें। "रिस्पांस हेडर्स" में, यदि आपको "कंटेंट-एनकोडिंग: गज़िप" देखना चाहिए, तो आप जाने के लिए अच्छे हैं।
कैसे करें गज़ब?
यदि आप अपने कोणीय एप्लिकेशन को अधिकांश क्लाउड प्लेटफ़ॉर्म या CDN में होस्ट करते हैं, तो आपको इस समस्या के बारे में चिंता नहीं करनी चाहिए क्योंकि वे शायद आपके लिए इसे संभाल चुके हैं। हालाँकि, यदि आपके पास अपना सर्वर है (जैसे कि NodeJS + expressJS) तो अपने कोणीय ऐप की सेवा, निश्चित रूप से जाँच लें कि क्या फाइल gzipped हैं। निम्नलिखित एक NodeJS + expressJS ऐप में अपनी स्थिर संपत्ति को जिप करने के लिए एक उदाहरण है। आप शायद ही इस मृत सरल मिडलवेयर "संपीड़न" की कल्पना कर सकते हैं, जो आपके बंडल के आकार को 2.21MB से घटाकर 495.13KB कर देगा।
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())
दूसरा दृष्टिकोण :: अपने कोणीय बंडल का विश्लेषण करें
यदि आपके बंडल का आकार बहुत बड़ा हो जाता है, तो आप अपने बंडल का विश्लेषण करना चाह सकते हैं क्योंकि आपने अनुचित बड़े आकार के थर्ड पार्टी पैकेज का उपयोग किया होगा या यदि आप इसका उपयोग नहीं कर रहे हैं तो आप कुछ पैकेज निकालना भूल गए हैं। वेबपैक में एक अद्भुत सुविधा है जो हमें वेबपैक बंडल की संरचना का एक दृश्य विचार देता है।
यह ग्राफ प्राप्त करना बहुत आसान है।
npm install -g webpack-bundle-analyzer- अपने कोणीय एप्लिकेशन में, चलाएं
ng build --stats-json(ध्वज का उपयोग न करें --prod)। सक्षम करने से --stats-jsonआपको एक अतिरिक्त फ़ाइल आँकड़े.जोन मिलेगा
- अंत में, रन करें
webpack-bundle-analyzer ./dist/stats.jsonऔर आपका ब्राउज़र लोकलहोस्ट: 8888 पर पेज को पॉप अप करेगा। इसके साथ मजे करो।
रेफ 1: कोणीय सीएलआई बजट ने मेरा दिन कैसे बचाया और वे आपका कैसे बचा सकते हैं
रेफ 2: 4 चरणों में कोणीय बंडल आकार का अनुकूलन करें