angular - SystemJS और Webpack में क्या अंतर हैं?




node-modules (2)

SystemJS क्लाइंट साइड काम करता है। यह मॉड्यूल (फाइलों) को गतिशील रूप से मांग पर लोड करता है जब उन्हें जरूरत होती है। आपको पूरे ऐप को सामने लोड नहीं करना है। आप एक फ़ाइल लोड कर सकते हैं, उदाहरण के लिए, एक बटन क्लिक हैंडलर के अंदर।

SystemJS कोड:

// example import at top of file
import myModule from 'my-module'
myModule.doSomething()

// example dynamic import (could be placed anywhere in your code)
// module not loaded until code is hit
System.import('my-module').then((myModule) {
  // myModule is available here
  myModule.doSomething()
});

यह काम करने के लिए इसे कॉन्फ़िगर करने के अलावा, यह सब वहाँ SystemJS है! अब आप एक SystemJS समर्थक हैं!

वेबपैक पूरी तरह से अलग है और मास्टर करने के लिए हमेशा के लिए लेता है। यह SystemJS के समान काम नहीं करता है लेकिन, Webpack का उपयोग करते समय, SystemJS निरर्थक हो जाता है।

वेबपैक एक एकल फ़ाइल तैयार करता है, जिसे बंडल कहा जाता है। जेएस - इस फाइल में सभी HTML, CSS, JS, आदि शामिल हैं क्योंकि सभी फाइलें एक ही फाइल में बंडल की जाती हैं, अब SystemJS जैसे (जहां अलग-अलग फाइलें लोड की जाती हैं, वहां किसी आलसी लोडर की जरूरत नहीं है। जरूरत है)।

SystemJS का उल्टा यह आलसी लोडिंग है। ऐप को तेज़ी से लोड करना चाहिए क्योंकि आप एक हिट में सब कुछ लोड नहीं कर रहे हैं।

वेबपैक का उल्टा मतलब है, हालांकि ऐप को शुरू में लोड करने में कुछ सेकंड लग सकते हैं, एक बार लोड होने और कैश्ड होने के बाद यह तेज बिजली देता है।

मैं SystemJS पसंद करता हूं लेकिन वेबपैक ट्रेंडियर लगता है।

Angular2 Quickstart SystemJS का उपयोग करता है।

कोणीय सीएलआई वेबपैक का उपयोग करता है।

वेबपैक 2 (जो पेड़ को हिलाने की पेशकश करेगा) बीटा में है इसलिए शायद यह वेबपैक पर जाने का एक बुरा समय है।

नोट SystemJS ES6 मॉड्यूल लोडिंग मानक को लागू कर रहा है। वेबपैक सिर्फ एक और एनपीएम मॉड्यूल है।

टास्क धावकों (उन लोगों के लिए वैकल्पिक रीडिंग जो पारिस्थितिकी तंत्र को समझना चाहते हैं, जिसमें SystemJS मौजूद हो सकता है)

SystemJS के साथ इसकी एकमात्र ज़िम्मेदारी फाइलों की आलसी लोडिंग है, इसलिए उन फ़ाइलों को छोटा करने के लिए अभी भी कुछ आवश्यक है, उन फाइलों को ट्रांसपाइल करें (जैसे SASS से CSS), आदि ये कार्य जो ज़रूर किए जाने चाहिए, कार्यों के रूप में जाने जाते हैं

Webpack, जब कॉन्फ़िगर किया जाता है, तो यह आपके लिए सही ढंग से करता है (और आउटपुट को एक साथ बंडल करता है)। यदि आप SystemJS के साथ कुछ ऐसा ही करना चाहते हैं, तो आप आमतौर पर एक जावास्क्रिप्ट कार्य धावक का उपयोग करेंगे। सबसे लोकप्रिय टास्क रनर एक और npm मॉड्यूल है जिसे gulp कहा जाता है।

इसलिए, उदाहरण के लिए, SystemJS एक संक्षिप्त जावास्क्रिप्ट फ़ाइल को लोड कर सकता है जिसे gulp द्वारा छोटा किया गया है। सही ढंग से सेटअप होने पर, गुल मक्खी और लाइव रीलोड पर फाइलों को छोटा कर सकता है। लाइव रीलोडिंग एक कोड परिवर्तन का स्वत: पता लगाने और अद्यतन करने के लिए एक स्वचालित ब्राउज़र ताज़ा है। विकास के दौरान महान। CSS के साथ, लाइव स्ट्रीमिंग संभव है (अर्थात आप पृष्ठ को फिर से लोड किए बिना नई शैलियों को अपडेट करते हुए देखते हैं)।

कई अन्य कार्य हैं जो वेबपैक और गल्प प्रदर्शन कर सकते हैं जो यहां कवर करने के लिए बहुत अधिक होंगे। मैंने एक उदाहरण प्रदान किया है :)

मैं अपना पहला कोणीय अनुप्रयोग बना रहा हूं और मैं यह पता लगाऊंगा कि मॉड्यूल लोडर की भूमिका क्या है। हमें उनकी आवश्यकता क्यों है? मैंने Google पर खोज करने का प्रयास किया और मुझे समझ नहीं आया कि हमें अपना एप्लिकेशन चलाने के लिए उनमें से एक को इंस्टॉल करने की आवश्यकता क्यों है?

क्या केवल नोड मॉड्यूल से सामान लोड करने के लिए import का उपयोग import पर्याप्त नहीं होगा?

मैंने इस ट्यूटोरियल का अनुसरण किया है (जो SystemJS का उपयोग करता है) और यह मुझे systemjs.config.js फ़ाइल का उपयोग करने के लिए systemjs.config.js है:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'transpiled', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

हमें इस कॉन्फ़िगरेशन फ़ाइल की आवश्यकता क्यों है?
हमें SystemJS (या वेबपैक या अन्य) की आवश्यकता क्यों है?
अंत में, आपकी राय में बेहतर क्या है?


अब तक मैं सिस्टमज का इस्तेमाल कर रहा था। यह एक-एक करके फाइलें लोड कर रहा था और पहला लोड बिना मिनिफाइ किए फाइलों में 3-4 सेकंड का समय ले रहा था। वेबपैक पर स्विच करने के बाद मुझे एक शानदार प्रदर्शन में सुधार मिला। अब यह केवल एक बंडल फाइल को लोड करने के लिए लेता है (पॉलीफ़िल्स और वेंडर लिबास जो लगभग कभी नहीं बदले और लगभग हमेशा कैश्ड होते हैं) और यही है। अब क्लाइंट साइड ऐप को लोड करने में केवल एक सेकंड लगता है। कोई अतिरिक्त ग्राहक पक्ष तर्क नहीं। प्रदर्शन के रूप में लोड की गई व्यक्तिगत फ़ाइलों की संख्या जितनी कम हो। Systemjs का उपयोग करते समय आपको प्रदर्शन में बचाने के लिए गतिशील रूप से मॉड्यूल आयात करने के बारे में सोचना चाहिए। वेबपैक के साथ आप अपने लॉजिक पर मुख्य रूप से ध्यान केंद्रित करते हैं क्योंकि आपके ब्राउज़र में बंडल के खनन और कैश्ड होने के बाद भी प्रदर्शन अच्छा रहेगा।





node-modules