परिनियोजन के लिए कोणीय 2 फ़ाइल आकार को कम करें

Question

मैं नया हूं और Angular2 पर प्रयोग कर रहा हूं। मैं ने पाया है कि जिले फ़ोल्डर में फ़ाइलें एक खाली परियोजना है कि कोणीय CLI

यहाँ द्वारा बनाया गया था के साथ काफी बड़ी है कई उपाय हैं मैं

1. ले लिया एनजी नई MyProject
2. सीडी MyProject
3. एनजी निर्माण --prod

और मेरे dist फ़ोल्डर के अंदर सभी फाइलें 1.1 एमबी हैं !! मेरा मानना ​​है कि वे तैनाती के लिए आवश्यक सभी फाइलें हैं। जितना संभव हो उतना ड्रॉप करने का सबसे अच्छा तरीका क्या है?

--- अपडेट --- बाद मैं एनजी निर्माण चलाने -e = prod --prod --no-sourcemap

--aot आकार लगभग 500 केबी नीचे मिला है। जो 50% बेहतर है। हालांकि, इस पोस्ट Angular 2: Reduce app size ने उल्लेख किया है कि फ़ाइल का आकार < 100kb तक पहुंच गया है। ऐसा लगता है जैसे लड़के ने इस तथ्य को अनदेखा किया कि किसी कारण से main.a2eb733289ef46cb798c.bundle.js 452kb है? क्या मुझे नीचे दी गई छवि में दिखाए गए अनुसार डिस्क फ़ोल्डर में मेरी सभी फाइलों को तैनात करना चाहिए? या क्या मैं कुछ तैनाती के आकार को कम करने के लिए अनदेखा कर सकता हूं? मैंने कहीं ऑनलाइन देखा कि कोणीय टीम मूल स्टार्टअप ऐप के लिए फ़ाइल आकार को 50kb तक कम करने में कामयाब रही।

Answer 1

बनाया के आकार को कम करने के लिए, आप पहली बार में केवल gzip फाइलों पर गौर करना चाहिए। यदि आप अपना वेबसर्वर अच्छी तरह से सेट करते हैं, तो ये केवल एक ही फाइलें हैं जो यह सेवा प्रदान करेगी। आप अपने index.html को भी gzip कर सकते हैं और यह सेवा की है। अधिकांश वेबसर्वर (उदाहरण के लिए nginx) स्थैतिक gzip फ़ाइलों को लोड करने की कार्यक्षमता के साथ आते हैं। इस सक्षम करने के लिए अपने nginx विन्यास में रखें:

gzip on; 
gzip_static on; 

अपाचे स्थिर gzip फ़ाइलों को लोड करने के लिए एक समान मॉड्यूल है।

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

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

ng build -e=prod --prod --no-sourcemap --aot 

अपने निर्माण मैं नोटिस किया था कि अगर मैं फ़ाइलों gzipped अपने आप उदाहरण के लिए 7zip उपयोग कर, और सेट यह उच्चतम संपीड़न पर, फ़ाइल का आकार और भी कम हो गया। हालांकि, ध्यान रखें कि क्लाइंट पक्ष पर इन फ़ाइलों को डिकंप्रेस करने से कम संपीड़ित फ़ाइलों की तुलना में अधिक CPU का उपयोग किया जाएगा, लेकिन हाल के CPUs के साथ, इस अंतर को सुरक्षित रूप से अनदेखा किया जा सकता है।

संकलित विक्रेता स्क्रिप्ट के अंदर बहुत सी टिप्पणी ब्लॉक (@license) भी हैं, आप उनसे छुटकारा पाने के लिए जेएस फाइलों को मिनीफिकेशन के दूसरे दौर के माध्यम से चलाने की कोशिश कर सकते हैं और उनमें से एक को फिर से जोड़ सकते हैं vendor.js

अद्यतन

आप उल्लेख है कि अन्य विचाराधीन एप्लिकेशन आकार < 100kb तक नीचे चला गया। आपका पहले से ही होगा, आपको बस js.gz फ़ाइल को देखना होगा, यह आपका संकलित/ज़िप एप्लिकेशन है, सादा जेएस फ़ाइल नहीं। आप जिन 50 केबी का जिक्र कर रहे हैं उनके लिए रोड मैप पर है। जहाँ तक मुझे याद है के रूप में वे, फ़ाइल का आकार भी 20kb को कम पाने में कामयाब रहे, क्योंकि वे (brotli)

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

यही कारण है कि उन्होंने angular-cli के अंदर पैकेजिंग कार्यान्वयन छुपाया है। लोगों के आवेदन को गड़बड़ किए बिना, किसी अन्य भवन और संकलन उपकरण में बदलना लागू करना बहुत आसान होगा। यह थोड़ी देर के लिए होगा, या यहां तक ​​कि अगर वे इसे लागू करने जा रहे हैं। अभी के लिए, मैं कहता हूं कि 100kb एक ढांचे के लिए एक काफी सभ्य आकार है जो आपको बहुत अधिक दे रहा है :)