2017-04-04 10 views
41

मैं हाल ही में rollup देख रहा हूं और देख रहा हूं कि यह वेबपैक और अन्य बंडलर से अलग कैसे है। एक बात जो मैंने पार की थी वह यह था कि "फ्लैट बंडलिंग" के कारण पुस्तकालयों के लिए यह बेहतर है। यह tweet और a recent PR for React to utilize Rollup पर आधारित है।फ्लैट बंडलिंग क्या है और वेबपैक की तुलना में रोलअप बेहतर क्यों है?

मेरे अनुभव में, रोलअप फ्लैट बंडलिंग (जैसे उत्थापन) के आसपास बेहतर अनुकूलन के कारण इमारत पुस्तकालयों में बेहतर है। 1/2

वेबपैक 2 आपके लिए बेहतर हो सकता है यदि आप कोड-विभाजन आदि के साथ ऐप्स को बंडल कर रहे हैं। 2/2

मुझे पूरी तरह से यकीन नहीं है कि मैं समझता हूं कि इसका क्या मतलब है। फ्लैट बंडलिंग का क्या संदर्भ है? मुझे पता है कि रोलअप के दस्तावेज में बंडल आकार को कम करने में मदद के लिए treeshaking का उल्लेख है लेकिन Webpack also has a way of doing this। शायद मैं पूरी तरह से अवधारणा को समझ नहीं पा रहा हूं।

कृपया ध्यान दें कि यह रोलअप बनाम वेबपैक के बारे में तुलनात्मक प्रश्न नहीं है। उसमें रुचि रखने वाले लोगों के लिए, comparison chart for that by Webpack है। यह मुख्य रूप से पूछ रहा है कि फ्लैट बंडल क्या है? और संभावित रूप से रोलअप इसे प्राप्त करने के लिए आंतरिक रूप से क्या करता है?

उत्तर

76

संपादित करें: Webpack अब कुछ स्थितियों में उत्थापन गुंजाइश का समर्थन करता है - read the blog post here

हम शायद यह सब सामान के लिए अलग अलग परिभाषा है, लेकिन मुझे लगता है कि फ्लैट बंडलिंग सीधा सा अर्थ है 'अपने मॉड्यूल लेने और उन्हें एक ही बंडल में बदल '- यानी,' फ्लैट 'अनावश्यक है। रिएक्ट 16 में बड़ा अंतर यह है कि आप रीपैक्ट के स्रोत मॉड्यूल को बंडल करने के लिए ज़िम्मेदार होने के बजाय डिफ़ॉल्ट रूप से प्रीपेड बंडल का उपभोग करेंगे (हालांकि हमेशा prebuilt UMD bundle of React available ब्राउज़र ब्राउज़र के साथ बनाया गया था)।

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

रोलअप एक अलग दृष्टिकोण लेता है - यह आपके सभी कोड को एक ही स्तर पर रखता है (वैरिएबल नाम आदि के बीच संघर्ष से बचने के लिए आवश्यक पहचानकर्ताओं को फिर से लिखना)। इसे अक्सर 'स्कोप hoisting' के रूप में जाना जाता है। इसके कारण, कोई प्रति-मॉड्यूल ओवरहेड नहीं है, और प्रति बंडल ओवरहेड नहीं है। आपका बंडल छोटा होने की गारंटी है, और तेजी से मूल्यांकन भी करेगा क्योंकि कम संकेत है (उस पर अधिक जानकारी - The cost of small modules)। व्यापार-बंद यह है कि यह व्यवहार ES2015 मॉड्यूल अर्थशास्त्र पर निर्भर करता है, और इसका मतलब है कि कुछ वेबपैक की उन्नत विशेषताओं को लागू करने के लिए बहुत कठिन है (उदा। रोलअप कोड-विभाजन का समर्थन नहीं करता है, कम से कम अभी तक नहीं!)।

संक्षेप में, webpack आम तौर पर क्षुधा के लिए बेहतर विकल्प है, और रोलअप आम तौर पर है पुस्तकालयों के लिए एक बेहतर फिट।

मैंने एक साथ small gist illustrating the differences रखा है। आप tinkering with the Rollup REPL द्वारा रोलअप के आउटपुट के लिए भी महसूस कर सकते हैं।

+1

अविश्वसनीय उत्तर। बहुत बहुत धन्यवाद :) यह बहुत स्पष्ट बनाता है! – aug

+2

ऐसा लगता है कि आपने रोलअप और वेबपैक के बारे में एक [वास्तव में भयानक माध्यम पोस्ट भी लिखा है] (https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c)। मैंने सोचा था कि मैं इसे चिल्लाना चाहूंगा :) – aug

+2

इस उत्तर को wprr को अद्यतन करने की आवश्यकता हो सकती है 3, जिसने स्कोप होस्टिंग पेश किया है। https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b – cynx

संबंधित मुद्दे

 संबंधित मुद्दे