Esbuild के साथ अपने वेबपैक बिल्ड को गति दें

ब्लॉग

Esbuild के साथ अपने वेबपैक बिल्ड को गति दें

Esbuild के साथ अपने वेबपैक बिल्ड को गति दें

esbuild-loader

के साथ अपने वेबपैक निर्माण को गति दें एस्बिल्ड !

एस्बिल्ड गो में लिखा गया एक जावास्क्रिप्ट बंडलर है जो तेज ESNext और टाइपस्क्रिप्ट ट्रांसपिलेशन और JS मिनिफिकेशन का समर्थन करता है।

esbuild-loader ट्रांसपिलेशन (जैसे बैबेल-लोडर/टीएस-लोडर) और मिनिफिकेशन (जैसे टर्सर) के लिए तेज़ विकल्प प्रदान करके आप अपने वेबपैक बिल्ड में एसबिल्ड की गति का उपयोग कर सकते हैं!

उत्सुक आपका निर्माण कितना तेज़ होगा? देखो उपयोगकर्ता क्या कह रहे हैं .

️ अभिनीत और इसे साझा करके इस परियोजना का समर्थन करें। मेरे पीछे आओ यह देखने के लिए कि मैं किन अन्य शानदार परियोजनाओं पर काम कर रहा हूँ! ❤️

इंस्टॉल

npm i -D esbuild-loader

शीघ्र व्यवस्थित

जावास्क्रिप्ट और JSX ट्रांसपिलेशन (जैसे। बैबेल)

में |_+_|:

webpack.config.js

टाइपस्क्रिप्ट और TSX

में |_+_|:

module.exports = { module: { rules: [ - { - test: /.js$/, - use: 'babel-loader', - }, + { + test: /.js$/, + loader: 'esbuild-loader', + options: { + loader: 'jsx', // Remove this if you're not using JSX + target: 'es2015' // Syntax to compile to (see options below for possible values) + } + }, ... ], }, }
विन्यास

यदि आपके पास |_+_| फ़ाइल, esbuild-loader स्वचालित रूप से इसका पता लगाएगा।

वैकल्पिक रूप से, आप इसे सीधे के माध्यम से भी पास कर सकते हैं |_+_| विकल्प :

webpack.config.js

️ esbuild केवल |_+_| . के सबसेट का समर्थन करता है विकल्प (देखें |_+_|इंटरफ़ेस) और टाइप-चेक नहीं करता है। टाइप-अवेयर आईडीई या |_+_| . का उपयोग करने की अनुशंसा की जाती है इसके बजाय टाइप-चेकिंग के लिए। इसे सक्षम करने की भी अनुशंसा की जाती है module.exports = { module: { rules: [ - { - test: /.tsx?$/, - use: 'ts-loader' - }, + { + test: /.tsx?$/, + loader: 'esbuild-loader', + options: { + loader: 'tsx', // Or 'ts' if you don't need tsx + target: 'es2015' + } + }, ... ] }, } तथा tsconfig.json आपके में विकल्प |_+_| से esbuild डॉक्स .

जेएस न्यूनतमीकरण (उदाहरण के लिए टर्सर)

आप JS मिनीफायर जैसे Terser या UglifyJs को बदल सकते हैं। इसकी जाँच पड़ताल करो मानक यह देखने के लिए कि esbuild कितना तेज़ है। |_+_| विकल्प एस्बिल्ड को बताता है कि यह बेहतर खनन करने के लिए नए जेएस सिंटैक्स का उपयोग कर सकता है।

में |_+_|:

tsconfigRaw
‍♀️ प्रोटिप: जेएस को ट्रांसपाइल करने के लिए लोडर के स्थान पर मिनीफाई प्लगइन का उपयोग करें

यदि आप टाइपस्क्रिप्ट, JSX, या वेबपैक द्वारा समर्थित किसी भी सिंटैक्स का उपयोग नहीं कर रहे हैं, तो आप ट्रांसपिलेशन के लिए मिनीफ़ायर का भी लाभ उठा सकते हैं (बेबेल के विकल्प के रूप में)। यह तेज़ होगा क्योंकि काम करने के लिए कम फ़ाइलें हैं और एक छोटा आउटपुट उत्पन्न करेगा क्योंकि पॉलीफ़िल केवल प्रति फ़ाइल के बजाय पूरे निर्माण के लिए एक बार बंडल किया जाएगा। बस सेट करें |_+_| आपको कौन सा समर्थन स्तर चाहिए, यह निर्दिष्ट करने के लिए मिनीफ़ायर पर विकल्प।

सीएसएस न्यूनीकरण

आपके सेटअप के आधार पर, CSS को छोटा करने के दो तरीके हैं। आपके पास अपने निर्माण में पहले से ही CSS सेटअप होना चाहिए { test: /.tsx?$/, loader: 'esbuild-loader', options: { loader: 'tsx', target: 'es2015', + tsconfigRaw: require('./tsconfig.json') } } .

⚠️ वर्तमान में निर्माण CSS मिनिफिकेशन के लिए मानचित्रों का समर्थन नहीं करता .

सीएसएस संपत्ति

यदि आपका सीएसएस एक सीएसएस फ़ाइल के रूप में निकाला और उत्सर्जित होता है, तो आप सीएसएस मिनिफिकेशन प्लगइन्स को बदल सकते हैं जैसे tsconfig या TransformOptions उसी के साथ |_+_| |_+_| . को सक्षम करके विकल्प।

मान लें कि सीएसएस कुछ इस तरह का उपयोग करके निकाला गया है MiniCssExtractPlugin , में |_+_|:

tsc --noEmit
जेएस में सीएसएस

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

में |_+_|:

esModuleInterop

उदाहरण

यदि आप काम कर रहे वेबपैक बिल्ड को देखना चाहते हैं जो बेसिक जेएस, रिएक्ट, टाइपस्क्रिप्ट, या नेक्स्ट.जेएस के लिए एस्बिल्ड-लोडर का उपयोग करते हैं, तो देखें उदाहरण रेपो .

अपना खुद का एस्बिल्ड लाओ (उन्नत)

esbuild-loader esbuild के एक संस्करण के साथ आता है जिसके साथ काम करने के लिए इसका परीक्षण किया गया है। तथापि, esbuild में लगातार रिलीज ताल है , और जब हम महत्वपूर्ण रिलीज़ के साथ बने रहने का प्रयास करते हैं, तो यह आसानी से पुराना हो सकता है।

|_+_| . का प्रयोग करें esbuild के अपने संस्करण में पास करने के लिए लोडर या छोटा प्लगइन में विकल्प (उदाहरण के लिए एक नया)।

️ एस्बिल्ड अभी स्थिर नहीं है और रिलीज में नाटकीय अंतर हो सकता है। एस्बिल्ड के किसी भिन्न संस्करण का उपयोग करने की गारंटी नहीं है।

tsconfig

|_+_| विकल्प हटा दिया जाएगा एक बार esbuild एक स्थिर रिलीज तक पहुंच जाता है। इसके बजाय esbuild एक पीयरडिपेंडेंसी बन जाएगा ताकि आप हमेशा अपना खुद का प्रदान करें।

️ विकल्प

लोडर

लोडर का समर्थन करता है esbuild . से सभी रूपांतरण विकल्प .

ध्यान दें:

  • स्रोत-मानचित्र आपके लिए स्वचालित रूप से कॉन्फ़िगर किए गए हैं target . |_+_|/|_+_| विकल्पों की अनदेखी की जाती है।
  • जड़ |_+_| आपके लिए स्वचालित रूप से पता चला है। आपको पास होने की आवश्यकता नहीं है webpack.config.js जब तक कि यह एक अलग रास्ते में न हो।

यहां कुछ सामान्य कॉन्फ़िगरेशन और कस्टम विकल्प दिए गए हैं:

लक्ष्य

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

लक्षित परिवेश (उदा. |_+_|, |_+_|, |_+_|)।

इसके बारे में और पढ़ें esbuild डॉक्स .

लोडर

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

फ़ाइल को संभालने के लिए उपयोग करने के लिए लोडर। के लिए प्रकार देखें संभावित मान .

इसके बारे में और पढ़ें esbuild डॉक्स .

jsxFactory

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

उपयोग करने के लिए JSX फ़ैक्टरी फ़ंक्शन नाम को अनुकूलित करें।

प्रतिक्रिया-दोहरी-सूची बॉक्स

इसके बारे में और पढ़ें esbuild डॉक्स .

jsxFragment

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

उपयोग करने के लिए JSX फ़्रैगमेंट फ़ंक्शन नाम को अनुकूलित करें।

इसके बारे में और पढ़ें esbuild डॉक्स .

कार्यान्वयन

प्रकार: |_+_|

कस्टम एस्बिल्ड-लोडर विकल्प।

इसका उपयोग a . में पास करने के लिए करें अलग एस्बिल्ड संस्करण .

मिनीफाईप्लगिन

लोडर का समर्थन करता है esbuild . से सभी रूपांतरण विकल्प .

लक्ष्य

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

लक्षित परिवेश (उदा. |_+_|, |_+_|)

इसके बारे में और पढ़ें esbuild डॉक्स .

यहां कुछ सामान्य कॉन्फ़िगरेशन और कस्टम विकल्प दिए गए हैं:

छोटा करना

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

जेएस मिनिफिकेशन सक्षम करें। सभी को सक्षम करता है |_+_| नीचे झंडे।

मिनिफिकेशन पर बारीक नियंत्रण रखने के लिए, इसे अक्षम करें और नीचे इच्छित विशिष्ट मिनिफिकेशन को सक्षम करें।

इसके बारे में और पढ़ें esbuild डॉक्स .

एक डोकर कप्तान से कुबेरनेट्स झुंड के साथ डोकर महारत
छोटा सफेद स्थान

प्रकार: |_+_|

व्हाट्सएप को हटाकर जेएस को छोटा करें।

छोटा पहचानकर्ता

प्रकार: |_+_|

पहचानकर्ताओं को छोटा करके JS को छोटा करें।

छोटा सिंटैक्स

प्रकार: |_+_|

समकक्ष लेकिन छोटे सिंटैक्स का उपयोग करके JS को छोटा करें।

कानूनी टिप्पणियाँ

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

इसके बारे में और पढ़ें esbuild डॉक्स .

स्रोत मानचित्र

प्रकार: |_+_|

डिफ़ॉल्ट: वेबपैक |_+_| विन्यास

सोर्समैप्स का उत्सर्जन करना है या नहीं।

सीएसएस

प्रकार: |_+_|

डिफ़ॉल्ट: |_+_|

कस्टम एस्बिल्ड-लोडर विकल्प।

सीएसएस फाइलों को छोटा करना है या नहीं।

शामिल

प्रकार: |_+_|

कस्टम एस्बिल्ड-लोडर विकल्प।

लघुकरण में शामिल करने के लिए संपत्तियों को फ़िल्टर करें

निकालना

प्रकार: |_+_|

कस्टम एस्बिल्ड-लोडर विकल्प।

लघुकरण से बहिष्कृत करने के लिए संपत्तियों को फ़िल्टर करें

कार्यान्वयन

प्रकार: |_+_|

कस्टम एस्बिल्ड-लोडर विकल्प।

इसका उपयोग a . में पास करने के लिए करें अलग एस्बिल्ड संस्करण .

‍♀️ अक्सर पूछे जाने वाले प्रश्न

क्या एस्बिल्ड प्लगइन्स का उपयोग करना संभव है?

नहीं, esbuild प्लगइन्स हैं केवल बिल्ड एपीआई में उपलब्ध है . और esbuild-loader दो कारणों से बिल्ड API के बजाय ट्रांसफ़ॉर्म API का उपयोग करता है:

  1. बिल्ड एपीआई जेएस बंडल बनाने के लिए है, जो कि वेबपैक करता है। यदि आप एस्बिल्ड के बिल्ड एपीआई का उपयोग करना चाहते हैं, तो वेबपैक के बजाय सीधे एसबिल्ड का उपयोग करने पर विचार करें।

  2. बिल्ड एपीआई सीधे फाइल-सिस्टम से पढ़ता है, लेकिन वेबपैक लोडर इन-मेमोरी संचालित करते हैं। वेबपैक लोडर अनिवार्य रूप से केवल ऐसे कार्य हैं जिन्हें इनपुट के रूप में कोड के साथ बुलाया जाता है। फ़ाइल-सिस्टम से नहीं पढ़ना लोडर को श्रृंखलाबद्ध होने की अनुमति देता है। उदाहरण के लिए, |_+_| . का उपयोग करना एकल फ़ाइल घटकों को संकलित करने के लिए (|_+_| फ़ाइलें), फिर |_+_| . का उपयोग करके SFC के केवल JS भाग को ट्रांसपाइल करने के लिए।

क्या एस्बिल्ड का उपयोग करना संभव है इंजेक्षन विकल्प?

नहीं |_+_| विकल्प केवल बिल्ड एपीआई में उपलब्ध है। और एस्बिल्ड-लोडर ट्रांसफॉर्म एपीआई का उपयोग करता है।

हालाँकि, आप वेबपैक समकक्ष का उपयोग कर सकते हैं प्लगइन प्रदान करें बजाय।

यदि आप रिएक्ट का उपयोग कर रहे हैं, तो देखें यह उदाहरण अपने घटकों में प्रतिक्रिया को स्वत: आयात करने के तरीके पर।

क्या बैबेल प्लगइन्स का उपयोग करना संभव है?

नहीं। यदि आपको वास्तव में उनकी आवश्यकता है, तो उन्हें वेबपैक लोडर पर पोर्ट करने पर विचार करें।

और कृपया चेन न बनाएं |_+_| और |_+_|. गति लाभ |_+_| को बदलने से आता है।

मुझे a . क्यों नहीं मिल रहा है 100x गति में सुधार जैसा विज्ञापित किया गया?

एस्बिल्ड को स्टैंडअलोन बंडलर बनाम एस्बिल्ड-लोडर + वेबपैक के रूप में चलाना पूरी तरह से अलग है:

  • esbuild अत्यधिक अनुकूलित है, गो में लिखा गया है, और देशी कोड में संकलित किया गया है। इसके बारे में और पढ़ें यहां .
  • esbuild-loader को JS रनटाइम में Webpack द्वारा नियंत्रित किया जाता है, जो प्रति फ़ाइल esbuild ट्रांसफ़ॉर्म लागू करता है। उसके ऊपर, वेबपैक कॉन्फ़िगरेशन में अन्य लोडर और प्लगइन्स होने की संभावना है जो इसे धीमा कर देते हैं।

किसी भी JS बंडलर का उपयोग करने से एक अड़चन आती है जो उन गति तक पहुँचना असंभव बना देती है। हालाँकि, esbuild-loader अभी भी आपके द्वारा बनाई गई बाधाओं को दूर करके आपके निर्माण को गति दे सकता है + const { ESBuildMinifyPlugin } = require('esbuild-loader') module.exports = { ..., + optimization: { + minimizer: [ + new ESBuildMinifyPlugin({ + target: 'es2015' // Syntax to compile to (see options below for possible values) + }) + ] + }, } , |_+_|, टर्सर, आदि।

क्या टाइप-चेकिंग सपोर्ट होगा?

के अनुसार एस्बिल्ड एफएक्यू , यह समर्थित नहीं होगा।

इन टाइप-चेकिंग विकल्पों पर विचार करें:

  • जैसे IDE का उपयोग करना वीएससीओडी या वेबस्टॉर्म जिसमें लाइव टाइप-चेकिंग बिल्ट इन है
  • चल रहा है |_+_| चेक टाइप करने के लिए
  • अपने वेबपैक बिल्ड में टाइप-चेकिंग को एक अलग प्रक्रिया के रूप में एकीकृत करना target

अन्य वेबपैक प्लगइन्स

तत्काल-मोचा

वेबपैक 5 समर्थन के साथ वेबपैक-एकीकृत मोचा परीक्षण-धावक।

वेबपैक-स्थानीयकरण-संपत्ति-प्लगइन

अपने वेबपैक बिल्ड को लोकलाइज़/i18nalize करें। कई स्थानों के लिए अनुकूलित!

विवरण डाउनलोड करें:

लेखक: निजी संख्या
डाउनलोड लिंक: स्रोत कोड डाउनलोड करें
आधिकारिक वेबसाइट: https://github.com/privatenumber/esbuild-loader
लाइसेंस: साथ

#webpack #esbuild #javascript #typescript