सिस्टमज

Question

रिलीज उम्मीदवारों के पहले कोणीय 2 आरसी 1 को बंडल करने के लिए कोणीय ने एक बंडल फ़ाइल की आपूर्ति की। रिलीज उम्मीदवारों के बाद से कोई और बंडल फ़ाइल नहीं है। कोणीय 2 और rxjs सहित मेरा ऐप अब 7secs से लोड होने के लिए 671 अनुरोध करता है। इसने विकास को अपंग कर दिया है।

क्या कोई जानता है कि कोणीय और आरएक्सजे को कैसे बंडल करना है और इन्हें system.config में शामिल करना है?

Answer 1

हल्का वजन प्रोजेक्ट प्राप्त करने के लिए आपको अपनी परियोजना को बंडल करने के लिए SystemJS Builder या JSPM जांचना चाहिए।

उदाहरण बीज परियोजना: https://stackoverflow.com/a/37098964/5706293

Answer 2

तुम सिर्फ एक बंडलर उपयोग करने की आवश्यकता:

• UMD फ़ाइलें: https://github.com/madhukard/angular2-jspm-seed

  @BrunoGarcia यहाँ एक बहुत अच्छी जानकारी दे दी है ऐसा शायद इसलिए है सबसे आसान समाधान। जैसा कि आप इस example में देख सकते हैं। आप बस अपनी systemjs कॉन्फ़िग फ़ाइल में UMD फ़ाइलों के लिए एक संदर्भ बनाने की जरूरत है (उत्पादन वातावरण के लिए तो उपयोगी नहीं):

  System.config({ 
      packages: { 
       app: { 
        main: './main.ts', 
        defaultExtension: 'ts' 
       }, 
       '@angular/core': { 
        main: 'core.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/compiler': { 
        main: 'compiler.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/common': { 
        main: 'common.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/platform-browser-dynamic': { 
        main: 'platform-browser-dynamic.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/platform-browser': { 
        main: 'platform-browser.umd.js', 
        defaultExtension: 'js' 
       }, 
       rxjs: { 
        defaultExtension: 'js' 
       } 
      } 
  }); 
  

  आप किसी अन्य exampe (शायद बेहतर) here पा सकते हैं!

• systemjs-बिल्डर + घूंट: अगर आप systemjs का उपयोग जारी रखना चाहते हैं, यह एक अच्छा कॉल इस समाधान का उपयोग करने के लिए है, लेकिन मैं इसे परीक्षण किया है और यह मेरे 30s ले लिया बंडल उत्पन्न करने के लिए, यह बहुत उपयोगी नहीं कर रही विकास के लिए (शायद मैं कुछ गलत कर रहा था [लगभग निश्चित]), लेकिन आप अभी भी जांच सकते हैं कि सिस्टम-बिल्डर here का उपयोग करके अपने एप्लिकेशन को कैसे बंडल करें;

• वेबपैक: मैं वर्तमान में वेबपैक का उपयोग कर रहा हूं। वेबपैक में वेबपैक-देव-सर्वर नामक एक देव उपकरण है जो अनुप्रयोग के दौरान प्रक्रिया को तेज़ी से बनाने के लिए वर्चुअल रूप से एप्लिकेशन को बंडल करता है (+ हॉट रीलोड)। आप यहाँ एक त्वरित video tutorial पा सकते हैं और कोणीय 2 दस्तावेज़ here से अधिक विस्तृत विवरण प्राप्त कर सकते हैं। वेबपैक का उपयोग करने के लिए आपको वेबपैक (और वेबपैक-डीवी-सर्वर अगर आप चाहते हैं) पैकेज स्थापित करना होगा: npm i -S webpack webpack-dev-server, webpack.config.js फ़ाइल बनाएं और केवल बंडल फ़ाइल या webpack-dev-server --inline उत्पन्न करने के लिए केवल webpack का उपयोग करके इसे चलाएं एक सर्वर बनाएं जो आपके संशोधनों के साथ फिर से बंडल करें। <script src="BUILD_DIR/bundle.js"></script>

इन दोनों पिछले विकल्प आप उत्पन्न करने के लिए अनुमति देगा: अब आपके bundle.js आपका index.html पर फ़ाइल सम्मिलित

// webpack.config.js file 
module.exports = { 
    entry: 'SRC_DIR/main.js', 
    output: { 
     path: 'BUILD_DIR', 
     filename: 'bundle.js' 
    } 
} 

: --inline विकल्प ब्राउज़र विंडो पर ऑटो पुनः लोड सक्षम बनाता है पूरे एप्लिकेशन का एक बंडल जिसे आप मैन्युअल रूप से अपनी index.html फ़ाइल में शामिल कर सकते हैं।

Answer 3

1) कॉन-बिल्ली सभी जेएस फाइलें और सीएसएस फाइलें gulp-concat का उपयोग कर index.html पर शामिल हैं।

2) systemjs.config.js फ़ाइल में उल्लिखित कोणीय पुस्तकालयों और ऐप घटकों को बंडल करना। गल्प systemjs-builder का उपयोग करना।

3) gulp-uglify का उपयोग करके बंडलों को छोटा करें।