कैसे कम करने के लिए बंडल बंडल आकार?

Question

मेरे पास एक साधारण ऐप है, जिसके द्वारा इनिशियलाइज़ किया गया है angular-cli।

यह 3 मार्गों के सापेक्ष कुछ पृष्ठ प्रदर्शित करता है। मेरे पास 3 घटक हैं। इस पृष्ठ पर मैं lodashकुछ डेटा प्राप्त करने के लिए (RxJS Observables, mapऔर subscribe) का उपयोग करने के लिए Angular 2 HTTP मॉड्यूल का उपयोग करता हूं । मैं इन तत्वों को एक सरल का उपयोग करके प्रदर्शित करता हूं *ngFor।

लेकिन, इस तथ्य के बावजूद कि मेरा ऐप वास्तव में सरल है, मुझे एक विशाल (मेरी राय में) बंडल पैकेज और नक्शे मिलते हैं। मैं gzip संस्करणों के बारे में बात नहीं करता, हालांकि आकार देने से पहले gzip करता हूं। यह सवाल सिर्फ एक सामान्य सिफारिश की जांच है।

कुछ परीक्षण परिणाम:

एनजी निर्माण

हैश: 8efac7d6208adb8641c1 समय: 10129ms chunk {0} main.bundle.js, main.bundle.map (मुख्य) 18.7 kB {3} [प्रारंभिक] [रेंडर]

chunk {1} style.bundle.css, styles.bundle.map, styles.bundle.map (शैलियाँ) 155 kB {4} [आरंभिक] [गाया]

chunk {2} script.bundle.js, script.bundle.map (स्क्रिप्ट) 128 kB {4} [आरंभिक] [रेंडर]

chunk {3} seller.bundle.js, seller.bundle.map (विक्रेता) 3.96 MB [प्रारंभिक] [विज्ञापन]

chunk {4} inline.bundle.js, inline.bundle.map (इनलाइन) 0 बाइट्स [प्रविष्टि] [रेंडर]

प्रतीक्षा करें: इस तरह के एक साधारण ऐप के लिए 10 एमबी विक्रेता बंडल पैकेज?

एनजी बिल्ड --प्रोड

हैश: 09a5f095e33b2980e7cc समय: 23455ms chunk {0} मुख्य.6273b0f04a07a1c2ad6c.bundle.js, मुख्य.63bb0f04a07a1c2ad6c.bundle.map (मुख्य) 18.33 kB

chunk {1} शैलियाँ .bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle .map, शैलियाँ .bfdaa4d8a4eb2d0cb019.bundle.map (154)

chunk {2} script.c5b720a078e5464ec211.bundle.js, script.c5b720a078e5464ec211.bundle.map (स्क्रिप्ट) 128 kB {4} [आरंभिक] [रेंडर]

chunk {3} विक्रेता.07af2467307e17d85438.bundle.js, विक्रेता.07af2467307e17d85438.bundle.map (विक्रेता) 3.96 MB [प्रारंभिक] [रेंडर]

chunk {4} inline.a345391d459797f81820.bundle.js, इनलाइन .a345391d459797f81820.bundle.map (इनलाइन) 0 बाइट्स [प्रविष्टि] [रेंडर]

फिर से प्रतीक्षा करें: ठेस के लिए इस तरह के एक समान बंडल आकार?

ng build --prod --aot

हैश: 517e4425ff872bbe3e5b समय: 22856ms चंक {0} मुख्य.95eadabace554e3c2b43.bundle.js, main.95eadable4e3c2b43.bundle.map (मुख्य) 130 kB {3} [प्रारंभिक] [प्रारंभिक]

chunk {1} style.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, शैलियाँ .53a388ae1dd2b7f5434.bundle.map (शैलियाँ) 154 kB {4} {4}

chunk {2} script.e5c2c90547f3168a7564.bundle.js, script.e5c2c90547f3168a7564.bundle.map (स्क्रिप्ट) 128 kB {4} [आरंभिक] [प्रस्तुत]

chunk {3} विक्रेता.41a6c1f57136df286f14.bundle.js, विक्रेता.41a6c1f57136df286f14.bundle.map (विक्रेता) 2.75 एमबी (प्रारंभिक) [रेंडर]

chunk {4} inline.97c0403c57a46c6a7920.bundle.js, इनलाइन.97c0403c57a46c6a7920.bundle.map (इनलाइन) 0 बाइट्स [प्रविष्टि] [रेंडर]

ng build --aot

हैश: 040cc91df4df5ffc3c3f समय: 11011 सेमी चंक {0} main.bundle.js, main.bundle.map (मुख्य) 130 kB {3} [आरंभिक] [रेंडर]

chunk {1} style.bundle.css, styles.bundle.map, styles.bundle.map (शैलियाँ) 155 kB {4} [आरंभिक] [गाया]

chunk {2} script.bundle.js, script.bundle.map (स्क्रिप्ट) 128 kB {4} [आरंभिक] [रेंडर]

chunk {3} seller.bundle.js, seller.bundle.map (विक्रेता) 2.75 MB [प्रारंभिक] [विज्ञापन]

chunk {4} inline.bundle.js, inline.bundle.map (इनलाइन) 0 बाइट्स [प्रविष्टि] [रेंडर]

तो मेरे एप्लिकेशन को ठेस पहुंचाने के लिए कुछ सवाल:

• वेंडर बंडल इतने विशाल क्यों हैं?
• क्या पेड़ को सही तरीके से हिलाना है angular-cli?
• इस बंडल आकार में सुधार कैसे करें?
• क्या .map फ़ाइलों की आवश्यकता है?
• क्या बंडलों में परीक्षण की विशेषताएं शामिल हैं? मैं उन्हें ठेस की जरूरत नहीं है।
• सामान्य प्रश्न: ठेस के लिए पैक करने के लिए अनुशंसित उपकरण क्या हैं? शायद angular-cli(पृष्ठभूमि में वेबपैक का उपयोग करना) सबसे अच्छा विकल्प नहीं है? क्या हम बेहतर कर सकते हैं?

मैंने स्टैक ओवरफ्लो पर कई चर्चाएं कीं, लेकिन मुझे कोई सामान्य सवाल नहीं मिला।

Comments

कोणीय 2 ऐप अनुकूलन के बारे में अधिक जानने के लिए, इसे देखें: github.com/mgechev/angular-performance-checklist#introduction

— Timathon

लेकिन मुझे नहीं लगता कि हमें इस बात की परवाह करनी चाहिए कि कोणीय-क्ली विकसित होगी और चीजें बेहतर और बेहतर होंगी। यदि आपको कुछ ऐसी सुविधा की आवश्यकता है जो कोणीय-

— सीएलआई के

जब तक मुझे लगता है कि @ तीमथॉन कुछ मायनों में सही है, अगर कोई भी उत्पादन में Angular2 को तैनात करने की कोशिश कर रहा है, तो उन्हें बंडल आकारों के बारे में ध्यान रखना चाहिए क्योंकि यह सीधे ऐप के प्रदर्शन को प्रभावित करता है। कोणीय प्रदर्शन चेकलिस्ट यह देखने के लिए एक शानदार संसाधन है कि क्या सुधार किया जा सकता है। कोणीय टीम बंडल आकार को कम करने की दिशा में काम कर रही है। यह देखने के लिए उत्साहित है कि यह कहाँ जाता है!

— जैक क्लेन्सी

Answer 1

फरवरी 2020 को अपडेट करें

चूंकि इस जवाब को बहुत अधिक कर्षण मिला, इसलिए मुझे लगा कि इसे नए कोणीय अनुकूलन के साथ अपडेट करना सबसे अच्छा होगा:

1. जैसा कि एक अन्य उत्तरदाता ने कहा, एंगुलर ng build --prod --build-optimizerv5 से कम उपयोग करने वाले लोगों के लिए एक अच्छा विकल्प है। नए संस्करणों के लिए, यह डिफ़ॉल्ट रूप से किया जाता हैng build --prod
2. एक अन्य विकल्प मॉड्यूल चंकिंग / आलसी लोडिंग का उपयोग करके अपने एप्लिकेशन को छोटे टुकड़ों में बेहतर रूप से विभाजित करना है
3. आइवी रेंडरिंग इंजन कोणीय 9 में डिफ़ॉल्ट रूप से आता है, यह बेहतर बंडल आकार प्रदान करता है
4. सुनिश्चित करें कि आपके तीसरे पक्ष के चित्र पेड़ शेकबाइल हैं। यदि आप अभी तक Rxjs v6 का उपयोग नहीं कर रहे हैं, तो आपको होना चाहिए।
5. यदि अन्य सभी विफल हो जाते हैं, तो वेबपैक-बंडल-एनालाइज़र जैसे टूल का उपयोग करके देखें कि आपके मॉड्यूल में ब्लोट किस कारण से हो रहा है
6. जाँच करें कि क्या आप फ़ाइलें gzipped हैं

---

कुछ दावा करते हैं कि एओटी संकलन का उपयोग करने से विक्रेता बंडल का आकार 250kb तक कम हो सकता है। हालाँकि, BlackHoleGalaxy के उदाहरण में, वह AOT संकलन का उपयोग करता है और इसे अभी भी 2.75MB के विक्रेता बंडल आकार के साथ छोड़ दिया जाता है ng build --prod --aot, जो कथित 250kb से 10x बड़ा है। यह कोणीय 2 अनुप्रयोगों के लिए आदर्श से बाहर नहीं है, भले ही आप v4.0 का उपयोग कर रहे हों। 2.75MB अभी भी किसी के लिए बहुत बड़ा है जो वास्तव में प्रदर्शन के बारे में परवाह करता है, खासकर एक मोबाइल डिवाइस पर।

कुछ चीजें हैं जो आप अपने आवेदन के प्रदर्शन में मदद कर सकते हैं:

1) एओटी और ट्री शेकिंग (कोणीय-क्ली इस बॉक्स से बाहर निकलता है)। कोणीय 9 एओटी के साथ डिफ़ॉल्ट रूप से ठेस और देव पर्यावरण पर है।

2) कोणीय यूनिवर्सल AKA सर्वर-साइड रेंडरिंग का उपयोग करना (cli में नहीं)

3) वेब वर्कर्स (फिर से, क्ली में नहीं, बल्कि एक बहुत अनुरोधित सुविधा है)
देखें: https://github.com/angular/angular-cli/issues/2305

4) सेवा कार्यकर्ता
देखें: https://github.com/angular/angular-cli/issues/4006

हो सकता है कि आपको एक ही आवेदन में इन सभी की आवश्यकता न हो, लेकिन ये कुछ ऐसे विकल्प हैं जो वर्तमान में कोणीय प्रदर्शन को अनुकूलित करने के लिए मौजूद हैं। मेरा मानना ​​है कि उम्मीद है कि Google भविष्य में इसे बेहतर बनाने के लिए प्रदर्शन और योजनाओं के मामले में कमियों से बाहर है।

यहाँ एक संदर्भ है जो ऊपर वर्णित कुछ अवधारणाओं के बारे में अधिक गहराई से बात करता है:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

Comments

मेरा न्यूनतम प्रोजेक्ट 384kB है, github.com/JCornat/min-angular देखें मुझे यकीन है कि इसे अनुकूलित करने का आसान तरीका है, लेकिन यह 250kB के करीब है!

— जैक कॉर्नेट

@JacquesCornat अच्छा लग रहा है! लेकिन आपके ऐप में केवल एक ही घटक है। सवाल यह है कि बंडल आकार या बड़े अनुप्रयोगों को कैसे प्रबंधित किया जाए। अक्सर एओटी बंडल आकार को कम नहीं करता है, और लोगों को अनुकूलन करने के लिए अन्य तरीके से देखने के लिए मजबूर किया जाता है। मैं वेबपैक-बंडल-एनालाइज़र की जांच करने के लिए सभी को सलाह देता हूं। एक बहुत ही उपयोगी / आसान तरीका है जो ब्लोट का कारण बनता है

— जैक क्लेन्सी

दुर्भाग्य से, उपयोगिताओं जैसे कि sw-precache2MB से अधिक के वेंडर बंडल से निपटने से इनकार करते हैं।

@JackClancy "सवाल यह है कि बंडल आकार या बड़े अनुप्रयोगों का प्रबंधन कैसे करें"। उनका कोई सवाल नहीं है "इस बंडल आकार को कैसे सुधारें?" और वह 3 घटकों के साथ अपने न्यूनतम ऐप के बारे में बात कर रहा है। वैसे भी, बड़े बंडलों के बारे में बात करना, एंगुलरक्लास / कोणीय-स्टार्टर कॉन्फ़िगरेशन का उपयोग करना, मेरे रेपो के समान, बड़े ऐप के लिए मेरे बंडल का आकार 8 एमबी (बिना नक्शा फाइलों के 4 एमबी) से 580kB तक चला गया।

— जैक कॉर्नेट

धन्यवाद, आपने मुझे बचा लिया। --प्रोड ने एप साइज को 6Mb से घटाकर 1.2Mb कर दिया। अभी भी सही नहीं है, लेकिन स्वीकार करने के बाद से यह केवल डेस्कटॉप उपयोग के लिए है।

— व्याचेस्लाव त्सिविना

Answer 2

नवीनतम कोणीय क्ली संस्करण का उपयोग करें और कमांड एनजी बिल्ड बिल्ड -प्रोड - बिल्ड-ऑप्टिमाइज़र का उपयोग करें। यह निश्चित रूप से उत्पादों के लिए बिल्ड आकार को कम करेगा ।

यह वही है जो बिल्ड ऑप्टिमाइज़र हुड के तहत करता है:

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

दूसरी चीज जो बिल्ड ऑप्टिमाइज़र करता है, वह है आपके एप्लिकेशन के रनटाइम कोड से कोणीय डेकोरेटर्स को हटाना। सज्जाकार कंपाइलर द्वारा उपयोग किए जाते हैं, और रनटाइम पर इसकी आवश्यकता नहीं होती है और इसे हटाया जा सकता है। इनमें से प्रत्येक नौकरी आपके जावास्क्रिप्ट बंडलों के आकार को कम करती है, और आपके उपयोगकर्ताओं के लिए आपके एप्लिकेशन की बूट गति बढ़ाती है।

नोट : कोणीय 5 और ऊपर के लिए एक अद्यतन, ng build --prodस्वचालित रूप से उपरोक्त प्रक्रिया का ख्याल रखना :)

Comments

कोणीय 6 के लिए अभी, विक्रेता अभी भी 4MB है केवल कोणीय / सामग्री और

— फायरबेस

यह कोणीय / सामग्री के साथ एक समस्या है, यहां तक ​​कि मैंने उस त्रुटि का सामना किया है। सही ढंग से नहीं किया गया पेड़ हिलाना ही मूल कारण है। नए रेंडर इंजन IVY के साथ शायद इसे हल किया जाएगा।

— शुभेंदु वैद

Answer 3

लॉडश आपके बंडल में कोड का एक बग चंक योगदान दे सकता है जो इस बात पर निर्भर करता है कि आप इससे कैसे आयात करते हैं। उदाहरण के लिए:

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

व्यक्तिगत रूप से मैं अभी भी अपने उपयोगिता कार्यों से छोटे पैरों के निशान चाहता था। जैसे न्यूनतम करने के बाद, आपके बंडल में flattenयोगदान कर सकते हैं 1.2K। इसलिए मैं सरलीकृत आवास कार्यों के संग्रह का निर्माण कर रहा हूं। flattenचारों ओर योगदान का मेरा कार्यान्वयन 50 bytes। आप इसे यहां देख सकते हैं कि क्या यह आपके लिए काम करता है: https://github.com/simontonsoftware/micro-dash

Comments

2 / मैंने ऊपर टिप्पणी से "लोडश-एसस" युक्तियों की कोशिश की। यह मेरे बंडल का आकार 0.08mb कम कर देता है।

— स्टेफेलडेक

यह बहुत नहीं है! क्या आपके पास अभी भी पुराने तरीके से लोटा आयात करने के अलावा कुछ और है? जब तक सब कुछ नए तरीके से आयात नहीं किया जाता है तब तक आपको कोई मदद नहीं मिलेगी ।

— एरिक सिमोनटन

मुझे लगता है कि मैंने सब कुछ बदल दिया है। आकार में अन्यथा परिवर्तन नहीं होता। मैंने नीचे एक और टिप दी (गज़िप बात) जिसने वास्तव में हमारी मदद की।

— स्टेफडेलक

दिलचस्प। आपके बंडल में कितना / योगदान दर्ज किया गया था? (उदाहरण का उपयोग करते हुए source-map-explorer।)

— एरिक सिमोनटन

Answer 4

सबसे पहले, वेंडर बंडल केवल इसलिए बड़े होते हैं क्योंकि कोणीय 2 बहुत सारे पुस्तकालयों पर निर्भर करता है। एंगुलर 2 ऐप के लिए न्यूनतम आकार लगभग 500KB (कुछ मामलों में 250KB, नीचे पोस्ट देखें) है।
ट्री शेकिंग का सही इस्तेमाल होता है angular-cli।
करो नहीं शामिल .mapक्योंकि डीबगिंग के लिए ही प्रयोग किया जाता, फ़ाइलें। इसके अलावा, यदि आप गर्म प्रतिस्थापन मॉड्यूल का उपयोग करते हैं, तो इसे हल्का विक्रेता को हटा दें।

उत्पादन के लिए पैक करने के लिए, मैं वैयक्तिक वेबपैक (और कोणीय-क्ली पर निर्भर करता है ) का उपयोग करता हूं, क्योंकि आप वास्तव configure everythingमें अनुकूलन या डिबगिंग के लिए कर सकते हैं ।
यदि आप उपयोग करना चाहते हैं Webpack, तो मैं मानता हूं कि यह थोड़ा मुश्किल है, लेकिन पहले नेट पर ट्यूटोरियल देखें, तो आप निराश नहीं होंगे।
पात्र, उपयोग angular-cli, जो वास्तव में अच्छी तरह से काम करते हैं।

ऐप्स को ऑप्टिमाइज़ करने के लिए अहेड-ऑफ-टाइम संकलन का उपयोग करना अनिवार्य है, और कोणीय 2 ऐप को 250KB तक सिकोड़ना है ।

यहाँ एक रेपो है जिसे मैंने बनाया ( github.com/JCornat/min-angular ) न्यूनतम कोणीय बंडल आकार का परीक्षण करने के लिए, और मैं 384kB प्राप्त करता हूं । मुझे यकीन है कि इसे अनुकूलित करने का आसान तरीका है।

एंगुलरक्लास / कोणीय-स्टार्टर कॉन्फ़िगरेशन का उपयोग करते हुए बड़े ऐप के बारे में बात करना, ऊपर दिए गए रेपो के समान, बड़े ऐप के लिए मेरे बंडल का आकार ( 150+ घटक ) 8 एमबी (बिना नक्शा फाइल के 4 एमबी) से 580kB तक चला गया ।

Comments

क्या विशिष्ट कोणीय-स्टार्टर विन्यास है जो बंडल आकार को कम करने में मदद करता है? यह webpack.config है?

— मार्टिनजे

हां, यह वेबपैक कॉन्फ़िगरेशन है जो बंडल आकार को कम करता है।

— जैक्स कॉर्नेट

स्पष्टीकरण के लिए धन्यवाद :)

— मार्टिनजेन

Answer 5

निम्न समाधान मानता है कि आप अपने डिस्ट / फोल्डर को नोडज का उपयोग करके परोस रहे हैं। कृपया रूट स्तर में निम्नलिखित app.js का उपयोग करें

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(compression()) //compressing dist folder 
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const port = process.env.PORT || '4201';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('Running at port ' + port))

सुनिश्चित करें कि आप निर्भरता स्थापित करते हैं;

npm install compression --save
npm install express --save;

अब ऐप बनाएं

ng build --prod --build-optimizer

यदि आप बिल्ड का कहना है कि 300kb (लगभग) को कम करना चाहते हैं, तो नीचे दी गई प्रक्रिया का पालन करें;

फ़ोल्डर के vendorअंदर नामक एक फ़ोल्डर बनाएं srcऔर विक्रेता फ़ोल्डर के अंदर एक फ़ाइल बनाएं rxjs.ts और उसमें नीचे कोड पेस्ट करें;

export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';

और फिर tsconfig.jsonअपने कोणीय-क्ली एप्लिकेशन में फ़ाइल में follwing जोड़ें । फिर, में compilerOptions, निम्नलिखित json जोड़ें;

"paths": {
      "rxjs": [
        "./vendor/rxjs.ts"
      ]
    }

यह आपके बिल्ड आकार को बहुत छोटा कर देगा। अपने प्रोजेक्ट में मैंने आकार को 11mb से घटाकर 1mb कर दिया। आशा करता हूँ की ये काम करेगा

Answer 6

एक बात मैं साझा करना चाहता हूं कि आयातित पुस्तकालय कैसे डिस्ट के आकार को बढ़ाते हैं। मेरे पास कोणीय 2-पल का पैकेज आयात किया गया था, जबकि मैं @ कोणीय / आम से निर्यात किए जाने वाले मानक डेटपाइप का उपयोग करके सभी आवश्यक दिनांक स्वरूपण कर सकता था।

Angular2- पल के साथ "angular2-moment": "^1.6.0",

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [आरंभिक] [रेंडर] chunk {1} main.7496551a26816427b68.bundle.js (मुख्य) 2.2 MB {3} {प्रारंभिक} {3} chunk {2} style.056656ed596d26ba0192.bundle.css (शैलियाँ) 69 बाइट्स {4} [प्रारंभिक] [रेंडर] chunk {3} विक्रेता.62c2cfe0ca7940006d1.bundle.js (विक्रेता) 3.84 MB [प्रारंभिक] [रेंडर] {4} } inline.0b9c3de53405d705e757.bundle.js (इनलाइन) 0 बाइट्स [प्रविष्टि] [रेंडर]

Angular2-क्षण को हटाने और इसके बजाय DatePipe का उपयोग करने के बाद

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [आरंभिक] [रेंडर] chunk {1} मुख्य} .f2b62721788695a4655c.bundle.js (मुख्य) 2.2 MB {3} {3} {3} chunk {2} style.056656ed596d26ba0192.bundle.css (शैलियाँ) 69 बाइट्स {4} [प्रारंभिक] [रेंडर] chunk {3} विक्रेता .e1de0630325858c9d01.bundle.js (विक्रेता) 3.35 MB [प्रारंभिक] [रेंडर] {4} } inline.3ae24861b3637391ba70.bundle.js (इनलाइन) 0 बाइट्स [प्रविष्टि] [रेंडर]

ध्यान दें विक्रेता बंडल आधा मेगाबाइट कम हो गया है !

बिंदु यह जाँचने योग्य है कि कोणीय मानक पैकेज क्या कर सकते हैं, भले ही आप बाहरी परिवाद से पहले से परिचित हों।

Answer 7

बंडल को कम करने का एक और तरीका है, JS के बजाय GZIP की सेवा करना। हम 2.6mb से 543ko गए।

https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

Answer 8

यदि आप दौड़ चुके हैं ng build --prod- आपके पास vendorफाइलें बिल्कुल नहीं होनी चाहिए ।

अगर मैं बस चलाता हूं ng build- मुझे ये फाइलें मिलती हैं:

फ़ोल्डर का कुल आकार ~ 14MB है। Waat! : डी

लेकिन अगर मैं दौड़ता हूं ng build --prod- मुझे ये फाइलें मिलती हैं:

फ़ोल्डर का कुल आकार 584K है।

एक और एक ही कोड। मैंने दोनों मामलों में इवी को सक्षम किया है। कोणीय 8.2.13 है।

तो - मुझे लगता है कि आप --prodअपने निर्माण कमान में नहीं जोड़ा ?

Answer 9

यदि आप कोणीय 8+ का उपयोग कर रहे हैं और आप बंडल के आकार को कम करना चाहते हैं तो आप आइवी का उपयोग कर सकते हैं। आइवी कोणीय 9 में डिफ़ॉल्ट दृश्य इंजन के रूप में आता है। उदाहरण के लिए, बस src / tsconfig.app.json पर जाएं और कोणीय.कॉमपाइलरेशंस पैरामीटर जोड़ें:

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */ 
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Answer 10

इससे मेरे मामले में आकार कम हो गया:

ng build --prod --build-optimizer --optimization.

कोणीय 5+ एनजी-बिल्ड के लिए - डिफ़ॉल्ट रूप से यह करता है। इस कमांड को चलाने के बाद आकार 1.7MB से घटकर 1.2MB हो गया, लेकिन मेरे उत्पादन उद्देश्य के लिए पर्याप्त नहीं है।

मैं फेसबुक मैसेंजर प्लेटफॉर्म पर काम करता हूं और मैसेंजर प्लेटफॉर्म पर चलने के लिए मैसेंजर ऐप्स को 1MB से कम होना चाहिए। प्रभावी पेड़ झटकों के लिए एक समाधान निकालने की कोशिश कर रहा है, लेकिन अभी भी कोई किस्मत नहीं है।

Answer 11

इसके 100% एनजी बिल्ड --prod --aot --build-optimizer --vendor-chunk = true पर काम करता है

Answer 12

मेरे पास एक कोणीय 5 + स्प्रिंग बूट ऐप है (Application.properties 1.3+) जिसकी मदद से संपीड़न (नीचे संलग्न लिंक) मुख्य एमबी के आकार को 2.7 एमबी से 530 KB तक कम करने में सक्षम था।

इसके अलावा, डिफ़ॉल्ट रूप से --aot और --build-optimizer --prod मोड के साथ सक्षम होते हैं, जिन्हें आपको अलग से निर्दिष्ट करने की आवश्यकता नहीं होती है।

https://stackoverflow.com/a/28216983/9491345

Answer 13

जाँच करें कि आपके पास एनजी बिल्ड-prod के लिए "उत्पादन" नाम है, क्योंकि यह एनजी बिल्ड-configuration = उत्पादन के लिए शॉर्टहैंड है। कोई जवाब नहीं मेरी समस्या हल हो गई, क्योंकि समस्या स्क्रीन के ठीक सामने बैठी थी। मुझे लगता है कि यह काफी सामान्य हो सकता है ... मैंने i18n के साथ ऐप को अंतर्राष्ट्रीय रूप दिया है, उदाहरण के लिए सभी कॉन्फ़िगरेशन जैसे उदा-प्रोडक्शन-एन। फिर मैंने एनजी बिल्ड -प्रोड के साथ बनाया, कि डिफ़ॉल्ट ऑप्टिमाइज़ेशन का उपयोग किया जाता है और इसे इष्टतम के करीब होना चाहिए, लेकिन वास्तव में एनजी बिल्ड को निष्पादित किया गया है जिसके परिणामस्वरूप 250kb के बजाय 7mb बंडल है।

Answer 14

कोणीय डॉक्स v9 ( https://angular.io/guide/workspace-config#alternate-build-configurations ) से लिया गया :

डिफ़ॉल्ट रूप से, एक उत्पादन कॉन्फ़िगरेशन परिभाषित किया गया है, और एनजी बिल्ड कमांड में --prod विकल्प है जो इस कॉन्फ़िगरेशन का उपयोग करके बनाता है। उत्पादन विन्यास सेट चूक है कि इस तरह के रूप में तरीकों, की संख्या में एप्लिकेशन का अनुकूलन फ़ाइलों bundling , अतिरिक्त खाली स्थान के कम से कम , टिप्पणियों और मृत कोड को दूर करने , और उपयोग कम, गुप्त नाम (करने के लिए कोड को फिर से लिखने "minification" )।

इसके अतिरिक्त आप @ angular-builders / custom-webpack: ब्राउज़र बिल्डर के साथ अपने सभी तैनाती को संपीड़ित कर सकते हैं जहां आपका कस्टम webpack.config.js ऐसा दिखता है:

module.exports = {
  entry: {
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  plugins: [
    new CompressionPlugin({
      deleteOriginalAssets: true,
    })
  ]
};

बाद में आपको अपने वेब सर्वर को संपीड़ित सामग्री परोसने के लिए कॉन्फ़िगर करना होगा जैसे कि nginx के साथ आपको अपने nginx में जोड़ना होगा। अनुबंध:

server {
    gzip on;
    gzip_types      text/plain application/xml;
    gzip_proxied    no-cache no-store private expired auth;
    gzip_min_length 1000;
    ...
}

मेरे मामले में डिस्ट फोल्डर 25 से 5 mb तक सिकुड़ जाता है - केवल एनजी बिल्ड में theprod का उपयोग करने के बाद और फिर संपीड़न के बाद 1.5mb तक सिकुड़ जाता है।