सिस्टमजेएस (कोणीय 2.0): अलग-अलग फ़ाइलों को लोड करना बनाम एक बड़ा जेएस कम करें?

Question

मैं SystemJS के संबंध में थोड़ा उलझन में हूं, ऐसा लगता है कि यह स्वचालित रूप से फ़ाइलों को अलग से लोड करता है और संकलित नहीं करता है और इन्हें एक बड़ी जेएस फ़ाइल में छोटा नहीं करता है।

मैंने सोचा कि मूल विचार अलग-अलग फाइलों के लिए अनुरोध कर रहा था हालांकि छोटे बुरे अभ्यास हैं? और एक prefered बड़ी जेएस फ़ाइल (minimified) और इसके बजाय उत्पादित।

इस प्रकार मैं अलग-अलग फ़ाइलों को लोड करने के लिए सिस्टमजेएस स्थापित कर रहा हूं (नीचे देखें), क्या यह अब ऐसा करने का अनुशंसित तरीका है?

System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('app/main') 
       .then(null, console.error.bind(console)); 

Answer 1

System.js (यानी ES6 मॉड्यूल मानक) में परिवर्तन विकास कार्यप्रवाह

विकास में

अलग फ़ाइलों + ऑन-द-मक्खी transpilation बनाने के लिए उपयोग किया जाता है व्यक्तिगत परिवर्तनों का परीक्षण, पुनः लोड करना और/या हॉट-रीलोडिंग प्रत्येक परिवर्तन के बाद पूरे एप्लिकेशन बंडल को पारदर्शी/निर्माण किए बिना काम करता है।

उत्पादन

अलग-अलग फ़ाइलों transpiled और जोड़ दिया जाता है में इस तरह के Webpack और JSPM के रूप में उपकरण का उपयोग कर का उपयोग करते हुए एक या अधिक बंडलों में ।

जेएसपीएम और वेबपैक (यानी संस्करण 2 के रूप में) दोनों डिफ़ॉल्ट रूप से ईएस 6 मॉड्यूल का समर्थन करते हैं और बंडल आउटपुट में अप्रयुक्त कोड को खत्म करने के लिए पेड़ हिलाने (यानी रोलअप.जेएस के माध्यम से) का लाभ उठा सकते हैं।

इसके अलावा: जब HTTP2 अधिकांश/सभी सर्वरों द्वारा समर्थित है और ES6 मॉड्यूल मानक सभी ब्राउज़रों द्वारा मूल रूप से समर्थित है, तो बंडलिंग एक विरोधी पैटर्न बन जाएगा। बंडलिंग (यानी HTTP अनुरोधों को कम करने) का लाभ अब प्रासंगिक नहीं होगा, और डाउनसाइड्स (यानी खराब कैशिंग विशेषताओं, विकास जटिलता में वृद्धि) इसका उपयोग करने के लिए पर्याप्त कारण नहीं होगा।

ट्री

हिलती के बजाय फ़ाइल आयात को कम करने, पेड़ मिलाते हुए निशान निर्धारित करने के लिए आवेदन के आयात पथ के सभी जो कोड उत्पादन में शामिल किया जाएगा द्वारा बंडलों का अनुकूलन।

उदाहरण के लिए, यदि आपका एप्लिकेशन Rxjs अवलोकनों को अतुल्यकालिक रूप से डेटा लाने के लिए उपयोग करता है तो आप संपूर्ण पैकेज आयात कर सकते हैं।

import 'rxjs'; 

यह शुरू करने के लिए अच्छी तरह से काम करता है लेकिन यह कुशल नहीं है। बंडलिंग प्रक्रिया के पेड़ हिलाने के चरण में यह निर्धारित करने का कोई तरीका नहीं है कि कौन सा कोड है | इसका उपयोग नहीं किया जाता है इसलिए पूरे आरएक्सजे पैकेज को आउटपुट में शामिल किया जाएगा।

आउटपुट बंडल आकार को अनुकूलित करने के लिए यह केवल आपके आवेदन कोड में उपयोग किए गए आरएक्सजे की विशेषताओं को आयात करना बेहतर होगा।

import { Observable } from 'rxjs/Observable'; 
import { map } from 'rxjs/operators/map'; 
import { startWith } from 'rxjs/operators/startWith'; 

जब पेड़ मिलाते हुए कदम चलाता है, यह एक Observable बनाने Rxjs पैकेज की आवश्यकता से केवल कोड शामिल हैं और map और startWith ऑपरेटरों का उपयोग करेंगे।

Transpilation

पेड़ मिलाते हुए और बंडलिंग के अलावा, आप भी एक रणनीति ES5 को ES6/टाइपप्रति स्रोत transpile की आवश्यकता होगी। परंपरागत रूप से, ग्रंट या गुलप जैसे स्वचालन उपकरण का उपयोग मैन्युअल रूप से विकास और उत्पादन दोनों के लिए कोड को पारदर्शी, संक्षिप्त, छोटा/उभारा करने के लिए आवश्यक चरणों को निर्दिष्ट किया गया था।

JSPM एक स्वयं को क्रियान्वित करने बंडल

jspm bundle-sfx app/main dist/main --uglify 

बनाने के द्वारा यह सब संभाल कर सकते हैं

Webpack ही

webpack -p app/main.js dist/main.js 

पूरा कर सकते हैं ES6/टाइपप्रति transpilation, दोनों उपकरण भी कर सकते हैं लाभ उठाने लोडर के अलावा/प्लगइन्स अन्य फ़ाइल प्रकारों जैसे कि सीएसएस और एसएसएसएसएस का समर्थन करने के लिए।