angular - Systemjs में बंडलिंग मतलब है



gulp jspm (1)

नवीनतम डेमो और आरसी 3 के साथ मैंने सिस्टम बदल दिया है। जेएस प्रवाह और अब बंडल का आकार काफी छोटा है। फिर भी RxJS कहानी में बहुत अधिक लाता है और उम्मीद है कि यह भविष्य में अनुकूलित किया जाएगा।

यह अब मेरे पास है:

var map = {
    'hub': 'src/app',
    'rxjs': 'node_modules/rxjs',
    '@angular': 'node_modules/@angular',
    'ng2-translate': 'node_modules/ng2-translate'
};

var packages = {
    'hub': { main: 'main', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'ng2-translate': {
        defaultExtension: 'js', main: 'ng2-translate.js'
    }
};

var packageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
];

packageNames.forEach(function(pkgName) {
    packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
});

System.config({
    defaultJSExtensions: true,
    map: map,
    packages: packages
});

और देव पर बंडल बनाने के बाद मैं इसे इस तरह लोड करता हूं:

System.import('lib/bootstrap').then(function(){
    System.import('app/main');
});

आकार 785kB + ~ 70kB को कोणीय polyfill (es6-shim, मेटाडाटा और zone.js को प्रतिबिंबित) के लिए है। यह अभी भी छोटा हो सकता है, विशेष रूप से पॉलिफ़िल, लेकिन मैं इसे सभ्य कहता हूं।

  • जेएसपीएम को स्पष्ट रूप से सेटअप से निकाल दिया गया था मुझे लगता है कि कोणीय जेएसपीएम के साथ बहुत अच्छा नहीं खेलता है जब यह आकार की बात आती है क्योंकि यह बहुत ही अनावश्यक फाइलें बंडल करता है

मैंने कोयोनर 2 (आरसी .1) और सिस्टम जेएस के साथ एक बीज प्रोजेक्ट स्थापित किया है। मैं उत्पादन के लिए एक स्थिर एकल बंडल बनाना चाहता हूं और विकास के लिए अपने कोड को छोड़कर सब कुछ बंडल करना चाहता हूं। Systemjs का उपयोग करने से पहले यह मेरे सामान्य प्रवाह था गुलप्पी-जेएसपीएम / सिस्टमज-बिल्डर के साथ बंडलिंग के बाद बंडल फ़ाइल 2 एमबी (स्रोत) या 1.2 एमबी (माइनेइज्ड) से बड़ा थी। जैसा कि यह बहुत बड़ा दिखता है मैंने सादे जेएसपीएम सीएलआई का उपयोग करके डबल चेक किया है, लेकिन फ़ाइल का आकार समान था।

कमांड का इस्तेमाल देव मोड के लिए किया गया था:

jspm bundle app/bootsrap - [path/to/app/**/*] mybundlename.js --inject

या उत्पादन के लिए:

jspm bundle app/bootstrap mybundlename.js

1 99 एमबी फ़ाइल होने पर उत्पादन बहुत बड़ा लगता है यदि मैं चाहता हूं कि सीमित बैंडविड्थ के साथ मोबाइल ब्राउज़र पर अपना वेब ऐप चलाने के लिए। खासकर चूंकि यह मेरा लगभग कोई कोड नहीं है (बस एक बूटस्ट्रैप फ़ाइल और मुख्य ऐप-घटक) के साथ एक बंडल था। मेरे कोणीय 1.5 ऐप बंडल आमतौर पर 700kB के आसपास सुंदर बड़े एंटरप्राइज़ अनुप्रयोगों के लिए थे।

बंडल को देखकर मुझे एहसास हुआ कि 540 फाइलें बंडल हैं मुझे पूरा यकीन है कि मुझे उनमें से अधिकतर की आवश्यकता नहीं है I

पूर्ण config.js यहां पाये जा सकते हैं: https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO

आखिरकार मेरे प्रश्न:

  • क्या किसी परियोजना में सिस्टमजेएस का उपयोग करते समय फ़ाइलों को बंडल किया जाना चाहिए या क्या मैं उन्हें बिना बांधा गया छोड़ देना चाहिए और सिस्टमजेएस आलसी लोडिंग का ख्याल रखना चाहिए?
  • यदि बंडलिंग की सिफारिश की जाती है तो मैं एक बंडल कैसे बना सकता हूँ जिसमें समझदार आकार है और केवल मेरे ऐप में कौन से फाइल वास्तव में निर्भर करती है?




jspm