প্রোড বান্ডেলের আকার কীভাবে হ্রাস করবেন?

Question

আমার কাছে একটি সাধারণ অ্যাপ্লিকেশন রয়েছে, এর মাধ্যমে শুরু করে angular-cli।

এটি 3 টি রুটের সাথে সম্পর্কিত কিছু পৃষ্ঠা প্রদর্শন করে। আমার 3 টি উপাদান রয়েছে। এই পৃষ্ঠার আমি ব্যবহারের এক উপর lodashএবং কৌণিক 2 HTTP- র মডিউল কিছু ডেটা পেতে (ব্যবহার RxJS Observableএস, mapএবং subscribe)। আমি একটি সাধারণ ব্যবহার করে এই উপাদানগুলি প্রদর্শন করি *ngFor।

তবে, আমার অ্যাপটি সত্যই সহজ সত্ত্বেও, আমি একটি বিশাল (আমার মতে) বান্ডিল প্যাকেজ এবং মানচিত্র পেয়েছি। আমি জিজেপ সংস্করণ সম্পর্কে কথা বলি না তবে জিপিংয়ের আগে আকারের size এই প্রশ্নটি কেবল একটি সাধারণ সুপারিশ তদন্ত।

কিছু পরীক্ষার ফলাফল:

এনজি বিল্ড

হ্যাশ: 8efac7d6208adb8641c1 সময়: 10129ms খণ্ড {0} main.bundle.js, main.bundle.map (প্রধান) 18.7 কেবি {3} [প্রাথমিক] [রেন্ডার]

খণ্ড {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (শৈলী) 155 কেবি {4} [প্রাথমিক] [রেন্ডার]

খণ্ড {2} scripts.bundle.js, scripts.bundle.map (স্ক্রিপ্ট) 128 কেবি {4} [প্রাথমিক] [রেন্ডার]

খণ্ড {3} vendor.bundle.js, vendor.bundle.map (বিক্রেতা) ৩.৯6 এমবি [প্রাথমিক] [রেন্ডার]

খণ্ড {4} inline.bundle.js, inline.bundle.map (ইনলাইন) 0 বাইট [প্রবেশ] [রেন্ডার]

অপেক্ষা করুন: এত সাধারণ অ্যাপের জন্য 10 এমবি বিক্রেতার বান্ডেল প্যাকেজ?

এনজি বিল্ড - প্রড

হ্যাশ: 09a5f095e33b2980e7 সিসি সময়: 23455 মিমি কাটা {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (মূল) 18.3 কেবি] 3} পুনরুদ্ধার [প্রাথমিক]

খণ্ড {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map [আরম্ভিক] [প্রাথমিক]

খণ্ড {2} স্ক্রিপ্টগুলি।

খণ্ড {3} বিক্রেতা.07af2467307e17d85438.bundle.js, বিক্রেতার.07af2467307e17d85438.bundle.map (বিক্রেতার) 3.96 মেগাবাইট [প্রাথমিক] [রেন্ডার]

খণ্ড {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (ইনলাইন) 0 বাইট [প্রবেশ] [রেন্ডার]

আবার অপেক্ষা করুন: প্রোডসের জন্য কি এই জাতীয় অনুরূপ বান্ডিল আকার?

ng build --prod --aot

হ্যাশ: 517e4425ff872bbe3e5b সময়: 22856ms খণ্ড {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (মূল) 130 কেবি {3} [প্রাথমিক] [রেন্ডার]

খণ্ড {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map [আরডি] [আরম্ভ করুন]

খণ্ড {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (স্ক্রিপ্ট) 128 কেবি {4} [প্রাথমিক] [রেন্ডার]

খণ্ড {3} বিক্রেতার 4১১ এ 6c1f57136df286f14.bundle.js, বিক্রেতা.41a6c1f57136df286f14.bundle.map (বিক্রেতার) 2.75 এমবি [প্রাথমিক] [রেন্ডার]

খণ্ড {4} ইনলাইন.97c0403c57a46c6a7920.bundle.js, ইনলাইন.97c0403c57a46c6a7920.bundle.map (ইনলাইন) 0 বাইট [প্রবেশ] [রেন্ডার]

ng build --aot

হ্যাশ: 040cc91df4df5ffc3c3f সময়: 11011ms টুকরো টুকরো} 0} main.bundle.js, main.bundle.map (প্রধান) 130 কেবি {3} [প্রাথমিক] [রেন্ডার]

খণ্ড {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (শৈলী) 155 কেবি {4} [প্রাথমিক] [রেন্ডার]

খণ্ড {2} scripts.bundle.js, scripts.bundle.map (স্ক্রিপ্ট) 128 কেবি {4} [প্রাথমিক] [রেন্ডার]

খণ্ড {3} vendor.bundle.js, vendor.bundle.map (বিক্রেতা) ২.75৫ এমবি [প্রাথমিক] [রেন্ডার]

খণ্ড {4} inline.bundle.js, inline.bundle.map (ইনলাইন) 0 বাইট [প্রবেশ] [রেন্ডার]

প্রোডে আমার অ্যাপ্লিকেশন স্থাপনের জন্য কয়েকটি প্রশ্ন:

• কেন বিক্রেতার বান্ডিল এত বিশাল?
• গাছ কাঁপানো সঠিকভাবে ব্যবহার করা হয় angular-cli?
• কিভাবে এই বান্ডিল আকার উন্নত?
• .Map ফাইলগুলি প্রয়োজনীয়?
• পরীক্ষার বৈশিষ্ট্যগুলি কি বান্ডিলগুলিতে অন্তর্ভুক্ত রয়েছে? আমার কাছে তাদের দরকার নেই।
• জেনেরিক প্রশ্ন: প্রোডসের জন্য প্যাক করার পুনঃসংশ্লিষ্ট সরঞ্জামগুলি কী কী? হতে পারে angular-cli(পটভূমিতে ওয়েবপ্যাক ব্যবহার করা) সেরা বিকল্প নয়? আমরা কি আরও ভাল করতে পারি?

স্ট্যাক ওভারফ্লোতে আমি অনেক আলোচনা অনুসন্ধান করেছি, তবে আমি কোনও জেনেরিক প্রশ্ন পাইনি।

Comments

কৌণিক 2 অ্যাপ অপ্টিমাইজেশান সম্পর্কে আরও জানতে, এটি দেখুন: github.com/mgechev/angular-performance-

— চেকলিস্ট

তবে আমি মনে করি না আমাদের এতো যত্ন নেওয়া উচিত, কৌণিক-ক্লিপটি বিকশিত হবে এবং জিনিসগুলি আরও ভাল এবং আরও ভাল করা হবে। যদি আপনার এমন কোনও বৈশিষ্ট্য প্রয়োজন হয় যা কৌণিক-ক্লিমে নেই, কেবল তাদের রেপোতে

— Timathon

যদিও আমি মনে করি @ টিম্যাথন কিছু উপায়ে সঠিক, যদি কেউ Angular2 কে উত্পাদনে স্থাপন করার চেষ্টা করে তবে তাদের বান্ডিল আকারের যত্ন নেওয়া উচিত কারণ এটি অ্যাপ্লিকেশনটির কার্যকারিতা সরাসরি প্রভাবিত করে। কৌণিক কর্মক্ষমতা চেকলিস্টটি উন্নত করা যায় তা দেখার জন্য দুর্দান্ত এক উত্স। কৌণিক দলটি বান্ডিলের আকার হ্রাস করার দিকে কাজ করছে। কোথায় যায় দেখে উত্তেজিত!

— জ্যাক ক্ল্যান্সি

Answer 1

2020 ফেব্রুয়ারী আপডেট করুন

যেহেতু এই উত্তরটি অনেকগুলি ট্র্যাকশন পেয়েছে, তাই আমি ভেবেছিলাম যে এটি আরও নতুন কৌণিক অনুকূলিতকরণের সাথে আপডেট করা ভাল it

1. অন্য একজন উত্তরদাতা ng build --prod --build-optimizerযেমন বলেছিলেন, অ্যাঙ্গুলার ভি 5 এর চেয়ে কম ব্যবহার করা লোকের পক্ষে ভাল বিকল্প। নতুন সংস্করণগুলির জন্য, এটি ডিফল্টরূপে দিয়ে সম্পন্ন হয়ng build --prod
2. আরেকটি বিকল্প হ'ল আপনার অ্যাপ্লিকেশনটিকে ছোট অংশগুলিতে আরও ভালভাবে বিভক্ত করতে মডিউল চুনকিং / অলস লোডিং ব্যবহার করা
3. আইভি রেন্ডারিং ইঞ্জিনটি কৌনিক 9 এ ডিফল্টরূপে আসে, এটি আরও ভাল বান্ডিল আকার দেয়
4. আপনার তৃতীয় পক্ষের ডিপগুলি গাছের কাঁপানোর যোগ্য কিনা তা নিশ্চিত করুন। আপনি যদি এখনও Rxjs v6 ব্যবহার না করে থাকেন তবে আপনার হওয়া উচিত।
5. অন্য সমস্ত কিছু যদি ব্যর্থ হয়, ওয়েবপ্যাক-বান্ডিল-বিশ্লেষকের মতো একটি সরঞ্জাম ব্যবহার করুন যা আপনার মডিউলগুলিতে ফুলে উঠছে তা দেখতে to
6. আপনার ফাইলগুলি জিজেপ করা হয়েছে কিনা তা পরীক্ষা করুন

---

কিছু দাবি যে এওটি সংকলন ব্যবহার করে বিক্রেতার বান্ডিলের আকার হ্রাস করতে পারে 250 কেবি। তবে ব্ল্যাকহোল গ্যালাক্সির উদাহরণে তিনি এওটি সংকলন ব্যবহার করেছেন এবং এখনও ২.75৫ এমবি আকারের বিক্রেতার বান্ডিল আকারে রেখে গেছেন ng build --prod --aot, যা অনুমিত 250kb এর চেয়ে 10x বড়। এটি কৌণিক 2 অ্যাপ্লিকেশনগুলির আদর্শের বাইরে নয়, এমনকি আপনি ভি 4.0 ব্যবহার করছেন। ২.75৫ এমবি এখনও যে কারও জন্য সত্যই পারফরম্যান্স সম্পর্কে বিশেষত মোবাইল ডিভাইসে যত্নশীল for

আপনার অ্যাপ্লিকেশনটির কার্য সম্পাদন করতে কয়েকটি জিনিস আপনি করতে পারেন:

1) এওটি এবং গাছের কাঁপুন (কৌণিক-ক্লাইটি বাক্সের বাইরে এটি করে)। অ্যাঙ্গুলার 9 এর সাথে প্রোড এবং ডেভ পরিবেশে ডিফল্টরূপে রয়েছে।

2) কৌণিক ইউনিভার্সাল একা সার্ভার-সাইড রেন্ডারিং ব্যবহার করে (ক্লায়েন্টে নয়)

3) ওয়েব ওয়ার্কার্স (আবার ক্লাইমে নয়, তবে একটি খুব অনুরোধ করা বৈশিষ্ট্য)
দেখুন: https://github.com/angular/angular-cli/issues/2305

4) পরিষেবা কর্মীরা
দেখুন: https://github.com/angular/angular-cli/issues/4006

একক অ্যাপ্লিকেশনটিতে আপনার এই সমস্তগুলির প্রয়োজন নাও হতে পারে, তবে এঙ্গুলের কর্মক্ষমতা অনুকূল করার জন্য বর্তমানে এমন কয়েকটি বিকল্প রয়েছে। আমি বিশ্বাস করি / আশা করি গুগল পারফরম্যান্সের দিক থেকে বাক্সের কমতিগুলি থেকে বেরিয়ে যাওয়ার বিষয়ে সচেতন এবং ভবিষ্যতে এটি আরও উন্নত করার পরিকল্পনা নিয়েছে।

এখানে একটি উল্লেখ রয়েছে যা আমি উপরে উল্লিখিত কয়েকটি ধারণার বিষয়ে আরও গভীরতার সাথে আলোচনা করেছি:

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

Comments

আমার ন্যূনতম প্রকল্পটি 384 কেবি, github.com/JCornat/min-angular দেখুন আমি নিশ্চিত এটির অনুকূলকরণের সহজ উপায় আছে তবে এটি 250 কেবি এর কাছাকাছি!

— জ্যাক কর্ন্যাট

পছন্দ করেছেন তবে আপনার অ্যাপ্লিকেশনটিতে কেবল একটি একক উপাদান রয়েছে। প্রশ্নটি কীভাবে বান্ডিল আকার এবং বৃহত্তর অ্যাপ্লিকেশনগুলি পরিচালনা করবেন। প্রায়শই এওটি বান্ডিল আকারগুলি পর্যাপ্ত পরিমাণে হ্রাস করে না এবং লোকেরা অপ্টিমাইজ করার জন্য অন্য উপায়ের দিকে তাকাতে বাধ্য হয়। আমি সবাইকে ওয়েবপ্যাক-বান্ডিল-বিশ্লেষকটি পরীক্ষা করার জন্য সুপারিশ করি। কী কারণে ব্লাট সৃষ্টি হচ্ছে তা দেখার একটি খুব সহায়ক / সহজ উপায়

— জ্যাক ক্ল্যান্সি

দুর্ভাগ্যক্রমে, যেমন ইউটিলিটিগুলি sw-precache2MB এর চেয়ে বেশি বিক্রেতার বান্ডিলগুলি মোকাবেলা করতে অস্বীকার করে।

@ জ্যাকক্লেঞ্জি "প্রশ্নটি কীভাবে বান্ডিল আকার বা বৃহত্তর অ্যাপ্লিকেশনগুলি পরিচালনা করবেন"। তার কোনও প্রশ্ন "এই বান্ডিল আকারটি কীভাবে উন্নত করা যায়?" এবং তিনি তার ন্যূনতম অ্যাপ্লিকেশনটির সাথে 3 টি উপাদান নিয়ে কথা বলছেন। যাইহোক, অ্যাঙ্গুলারক্লাস / কৌণিক-স্টার্টার কনফিগারেশন ব্যবহার করে বড় বান্ডিল সম্পর্কে কথা বলছি, আমার রেপোর মতোই, বড় অ্যাপ্লিকেশানের জন্য আমার বান্ডিল আকারটি 8 এমবি (মানচিত্র ফাইলবিহীন 4 এমবি) থেকে 580 কেবিতে চলে গেছে।

— জ্যাক কর্নাত

ধন্যবাদ, আপনি আমাকে বাঁচিয়েছেন - প্রোড অ্যাপটির আকার 6Mb থেকে হ্রাস করে 1.2Mb এ নিয়েছে। এখনও নিখুঁত নয়, তবে এটি গ্রহণ কেবলমাত্র ডেস্কটপ ব্যবহারের জন্য।

— ব্য্যাচেস্লাভ সিভিনা

Answer 2

সর্বশেষতম কৌণিক ক্লিপ সংস্করণ ব্যবহার করুন এবং কমান্ড এনজি বিল্ড - প্রড - বিল্ড-অপ্টিমাইজারটি ব্যবহার করুন এটি অবশ্যই এনভির জন্য বিল্ড আকার হ্রাস করবে ।

বিল্ড অপটিমাইজারটি হুডের নীচে এটি করে:

বিল্ড অপটিমাইজারের দুটি প্রধান কাজ রয়েছে। প্রথমত, আমরা আপনার আবেদনের অংশগুলি খাঁটি হিসাবে চিহ্নিত করতে সক্ষম হয়েছি, এটি বিদ্যমান সরঞ্জামগুলির দ্বারা সরবরাহিত বৃক্ষ কাঁপানোর উন্নতি করে, আপনার প্রয়োগের অতিরিক্ত অংশগুলি প্রয়োজন নেই যা অপসারণ করে।

বিল্ড অপ্টিমাইজার দ্বিতীয়টি যা আপনার অ্যাপ্লিকেশনটির রানটাইম কোড থেকে কৌণিক সজ্জা সরিয়ে ফেলা হয়। সংকলক সংকলক দ্বারা ব্যবহৃত হয়, এবং রানটাইম এ প্রয়োজন হয় না এবং সরানো যেতে পারে। এই প্রতিটি কাজ আপনার জাভাস্ক্রিপ্ট বান্ডিলগুলির আকার হ্রাস করে এবং আপনার ব্যবহারকারীদের জন্য আপনার অ্যাপ্লিকেশনটির বুটের গতি বাড়িয়ে তোলে।

দ্রষ্টব্য : কৌণিক 5 এবং তার জন্য একটি আপডেট, ng build --prodস্বয়ংক্রিয়ভাবে উপরের প্রক্রিয়াটির যত্ন নেবে :)

Comments

এখনই কৌণিক 6 হিসাবে, বিক্রেতা এখনও কেবল কৌণিক / উপাদান এবং

— ফায়ারবেস

এটি কৌণিক / উপাদানগুলির সাথে সমস্যা, এমনকি আমি সেই ত্রুটির মুখোমুখি হয়েছি। গাছের কাঁপানো সঠিকভাবে না করা সম্ভবত এটির মূল কারণ। নতুন রেন্ডারার ইঞ্জিন আইভিওয়াইয়ের সাথে সম্ভবত এটির সমাধান হবে।

— শুভেন্দু বৈদ

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.08 এমবি হ্রাস করে।

— স্টেফডেলিক

এতো কিছু না! পুরানো উপায়ে আপনার এখনও লোডাশ আমদানি করার কিছু আছে? সবকিছু নতুন উপায়ে আমদানি করা না হলে আপনি কোনও সহায়তা পাবেন না ।

— এরিক সিমন্তন

আমি মনে করি আমি সবকিছু প্রতিস্থাপন করেছি। অন্যথায় আকারের পরিবর্তন হত না। আমি নীচে আরও একটি টিপ দিলাম (gzip জিনিস) যা সত্যই আমাদের সহায়তা করেছে।

— স্টেফডেলিক

মজাদার. আপনার বান্ডেলটি কতটা / লোগাসে অবদান রাখছিল? (উদাহরণস্বরূপ source-map-explorer।)

— এরিক সিমন্তন

Answer 4

প্রথমত, বিক্রেতাদের বান্ডিলগুলি বিশাল কারণ কেবল অ্যাঙ্গুলার 2 অনেকগুলি লাইব্রেরিতে নির্ভর করে। কৌণিক 2 অ্যাপের সর্বনিম্ন আকার প্রায় 500KB (কিছু ক্ষেত্রে 250 কেবি, নীচের পোস্টটি দেখুন)।
গাছ কাঁপানো সঠিকভাবে দ্বারা ব্যবহৃত হয় angular-cli। ফাইলগুলি অন্তর্ভুক্ত
করবেন না.map , কারণ এটি কেবল ডিবাগিংয়ের জন্য ব্যবহৃত হয়। তদুপরি, আপনি যদি গরম প্রতিস্থাপন মডিউল ব্যবহার করেন তবে এটি বিক্রেতাকে হালকা করার জন্য সরান।

উত্পাদনের জন্য প্যাক করতে, আমি ব্যক্তিগতভাবে ওয়েবপ্যাক ব্যবহার করি (এবং কৌণিক- ক্লিমে এটির উপরও নির্ভর করে ), কারণ আপনি সত্যই configure everythingঅপ্টিমাইজেশন বা ডিবাগিংয়ের জন্য পারেন ।
আপনি যদি ব্যবহার করতে চান তবে Webpackআমি সম্মত হলাম এটি কিছুটা প্রথম কৌশল, তবে নেটটিতে টিউটোরিয়ালগুলি দেখুন, আপনি হতাশ হবেন না।
অন্যথায়, ব্যবহার করুন angular-cli, যা কাজটি খুব ভালভাবে সম্পন্ন করে।

ব্যবহার এগিয়ে অফ সময় সংকলন অপ্টিমাইজ অ্যাপ্লিকেশানে বাধ্যতামূলক, এবং কৌণিক 2 অ্যাপ্লিকেশন সঙ্কুচিত 250KB ।

নূন্যতম কৌণিক বান্ডিল আকার পরীক্ষা করতে আমি তৈরি করা একটি রেপো এখানে ( github.com/JCornat/min-angular ) তৈরি করেছি এবং আমি 384kB পেয়েছি । আমি নিশ্চিত যে এটি অনুকূলকরণের সহজ উপায় আছে।

বড় অ্যাপ্লিকেশন সম্পর্কে কথা বলার সাথে সাথে, AngularClass / কৌণিক-স্টার্টার কনফিগারেশন ব্যবহার করে উপরের রেপোটি সমান, বড় অ্যাপগুলির জন্য আমার বান্ডিল আকার ( 150+ উপাদান ) 8MB (মানচিত্র ফাইলবিহীন 4MB) থেকে 580kB তে চলে গেছে ।

Comments

এটি কোন নির্দিষ্ট কৌণিক-স্টার্টার কনফিগারেশন যা বান্ডিলের আকার হ্রাস করতে সহায়তা করে? এটি কি ওয়েবপ্যাক.কনফিগ?

— মার্টিনজেএইচ

হ্যাঁ, এটি ওয়েবপ্যাক কনফিগারেশন যা বান্ডেলের আকার হ্রাস করে।

— জ্যাক কর্ন্যাট

স্পষ্টতার জন্য ধন্যবাদ :)

— মার্টিনজেএইচ

Answer 5

নিম্নলিখিত সমাধানটি ধরে নিয়েছে যে আপনি নোডেজগুলি ব্যবহার করে আপনার ডিস্ট / ফোল্ডারটি পরিবেশন করছেন। নিম্নলিখিত স্তরের অ্যাপ্লিকেশনগুলি ব্যবহার করুন

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আপনার কৌণিক-ক্লাইপ অ্যাপ্লিকেশনটিতে ফাইলটিতে ফোলিং যোগ করুন । তারপরে compilerOptions, নীচের জসন যুক্ত করুন;

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

এটি আপনার বিল্ড আকারটি আরও ছোট করে তুলবে। আমার প্রকল্পে আমি আকারটি 11 এমবি থেকে 1 এমবিতে হ্রাস করেছি। আশা করি এটা সাহায্য করবে

Answer 6

আমি একটি জিনিস ভাগ করে নিতে চাই তা হল কীভাবে আমদানিকৃত লাইব্রেরিগুলি ডিস্টের আকার বাড়ায়। আমি কৌণিক 2-মুহুর্তের প্যাকেজটি আমদানি করেছিলাম, যেখানে আমি @ কৌনিক / সাধারণ থেকে রফতানি করা স্ট্যান্ডার্ড ডেট পাইপ ব্যবহার করে প্রয়োজনীয় সমস্ত তারিখের ফর্ম্যাট করতে পারি।

কৌণিক 2-মুহুর্তের সাথে "angular2-moment": "^1.6.0",

খণ্ড {0} পলিফিলস .036982dc15bb5fc67cb8.bundle.js (পলিফিলস) 191 কেবি {4} [প্রাথমিক] [রেন্ডার] খণ্ড {1} main.e7496551a26816427b68.bundle.js (মূল) ২.২]] প্রাথমিক [র] শঙ্ক {2} শৈলীগুলি } inline.0b9c3de53405d705e757.bundle.js (ইনলাইন) 0 বাইট [এন্ট্রি] [রেন্ডার]

Angular2-moment অপসারণ এবং এর পরিবর্তে তারিখ পাইপ ব্যবহার করার পরে

খণ্ড {0} পলিফিলস .036982dc15bb5fc67cb8.bundle.js (পলিফিলস) 191 কেবি {4} [প্রাথমিক] [রেন্ডার] খণ্ড {1} main.f2b62721788695a4655c.bundle.js (মূল) ২.২] প্রাথমিক [পুনরায়] খণ্ড {2} শৈলীগুলি.056656ed596d26ba0192.bundle.css (শৈলী) 69 বাইট {4} [প্রাথমিক] [রেন্ডার] খণ্ড {3} vendor.e1de06303258c58c9d01.bundle.js (বিক্রেতার) 3..৩৫ এমবি [প্রাথমিক] } inline.3ae24861b3637391ba70.bundle.js (ইনলাইন) 0 বাইট [প্রবেশ] [রেন্ডার]

নোট করুন বিক্রেতার বান্ডেলটি অর্ধেক মেগাবাইট হ্রাস পেয়েছে !

পয়েন্টটি হ'ল এটি ইতিমধ্যে কোন বাহ্যিক bষধের সাথে পরিচিত হয়ে থাকলেও কৌণিক স্ট্যান্ডার্ড প্যাকেজগুলি কী করতে পারে তা খতিয়ে দেখার মতো।

Answer 7

বান্ডেল হ্রাস করার আরেকটি উপায়, জেএসের পরিবর্তে জিজেআইপি পরিবেশন করা। আমরা 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% এনজি বিল্ড - প্রোড --আওট - বিল্ড-অপ্টিমাইজার - ভেন্ডর-অংশ = সত্য works

Answer 12

আমার একটি কৌণিক 5 + স্প্রিং বুট অ্যাপ (অ্যাপ্লিকেশন.প্রোপার্টি 1.3+) সংক্ষেপণের সাহায্যে (নীচে সংযুক্ত লিঙ্কটি) মূল.বান্ডেল.টি আকারের আকার 2.7 এমবি থেকে 530 কেবি কমাতে সক্ষম হয়েছিল।

এছাড়াও ডিফল্টরূপে --আওট এবং - বিল্ড-অপ্টিমাইজার - প্রোড মোড সহ সক্ষম হয় আপনার সেগুলি আলাদাভাবে নির্দিষ্ট করার দরকার নেই।

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

Answer 13

এনজি বিল্ড - কনফিগারেশন = উত্পাদনের জন্য সংক্ষিপ্ততর হওয়ায় যেহেতু এনজি বিল্ড - প্রোডের জন্য "প্রোডাকশন" নামক কনফিগারেশন রয়েছে তা পরীক্ষা করুন কোনও উত্তরই আমার সমস্যার সমাধান করেনি, কারণ সমস্যাটি ঠিক পর্দার সামনে বসে ছিল। আমি মনে করি এটি বেশ সাধারণ হতে পারে ... আমি অ্যাপ্লিকেশনটিকে i18n দিয়ে সমস্ত কনফিগারেশন নামকরণ করে যেমন উত্পাদন-এন দিয়ে আন্তর্জাতিককরণ করেছি। তারপরে আমি এনজিও বিল্ড - প্রোড ধরে ধরে তৈরি করেছি যে ডিফল্ট অপ্টিমাইজেশন ব্যবহার করা হয়েছে এবং এটি সর্বোত্তমের কাছাকাছি হওয়া উচিত, তবে বাস্তবে কেবল এনজি বিল্ড কার্যকর করা হয়েছে যার ফলস্বরূপ 250 কেবিবির পরিবর্তে 7 এমবি বান্ডেল হবে।

Answer 14

কৌনিক ডক্স v9 ( https://angular.io/guide/workspace-config#alternate-build-configurations ) থেকে নেওয়া :

ডিফল্টরূপে, একটি উত্পাদন কনফিগারেশন সংজ্ঞায়িত করা হয়, এবং এনজি বিল্ড কমান্ডের এই কনফিগারেশনটি ব্যবহার করে --prod বিকল্প রয়েছে pr উত্পাদনের কনফিগারেশনটি ডিফল্ট সেট করে যা অ্যাপ্লিকেশনটিকে বিভিন্ন উপায়ে অপ্টিমাইজ করে, যেমন ফাইলগুলি বান্ডিল করা , অতিরিক্ত শ্বেত স্থান কমিয়ে দেওয়া , মন্তব্যগুলি এবং মৃত কোড সরিয়ে দেওয়া এবং সংক্ষিপ্ত, গুপ্ত নাম ( "মিনিফিকেশন" ) ব্যবহার করতে পুনরায় লেখার কোড ।

অতিরিক্তভাবে আপনি @ কৌনিক-বিল্ডার / কাস্টম-ওয়েবপ্যাক: আপনার ব্রাউজার নির্মাতা যেখানে আপনার কাস্টম ওয়েবপ্যাক.config.js দেখতে এমন দেখাচ্ছে তা দিয়ে আপনার সমস্ত মোতায়েনযোগ্যগুলি সংকুচিত করতে পারেন:

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

এরপরে সংকুচিত সামগ্রী পরিবেশন করতে আপনাকে আপনার ওয়েব সার্ভারটি কনফিগার করতে হবে যেমন এনজিনেক্স সহ আপনাকে আপনার এনগিনএক্স.কম এ যুক্ত করতে হবে:

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

আমার ক্ষেত্রে ডিস্ট ফোল্ডারটি 25 থেকে 5 এমবি থেকে সঙ্কুচিত হয়ে এনজি বিল্ডে - প্রোড ব্যবহার করার পরে সংক্ষেপণের পরে আরও 1.5 মিম্বুতে সঙ্কুচিত হবে।