लॉश आयात करने का सही तरीका

Question

मेरे पास नीचे एक पुल अनुरोध प्रतिक्रिया थी, बस सोच रहा था कि कौन सा रास्ता दर्ज करना आयात करने का सही तरीका है?

बेहतर होगा कि आप आयात को 'लॉश / है' से करें .. पहले के संस्करण के लिए, जो कि बहुत ही भारी है, हम खुद को केवल एक विशेष मॉड्यूल / फंक्शन को आयात करना चाहिए, न कि पूरे लॉश लाइब्रेरी को आयात करने के बजाय। नए संस्करण (v4) के बारे में निश्चित नहीं है।

import has from 'lodash/has';

बनाम

import { has } from 'lodash';

धन्यवाद

Comments

देखें इस सवाल का जवाब क्यों बाद कर सकते हैं अभी भी इस तरह Webpack के रूप में कुछ वातावरण में एक प्रदर्शन के अनुकूलन उठाना के रूप में एक अधिक गहराई से चर्चा के लिए। यह स्थैतिक-विश्लेषण और पेड़-झटकों के उपयोग के कारण है।

— पैट्रिक रॉबर्ट्स

Answer 1

import has from 'lodash/has';बेहतर है क्योंकि लॉश एक एकल फ़ाइल में सभी फ़ंक्शन करता है, इसलिए 100k पर पूरे 'लॉश' लाइब्रेरी को आयात करने के बजाय, यह केवल लिकेश के hasफ़ंक्शन को आयात करना बेहतर है जो शायद 2k है।

Comments

@GeorgeKatsanos आप बस उस फंक्शन को इम्पोर्ट करते हैं जिसका आप उपयोग करना चाहते हैं, इसके लिए आपको '_' की जरूरत नहीं है

— बिल

@GeorgeKatsanos 'lodash/has'एक अलग पैकेज नहीं है। has.jsनियमित 'lodash'पैकेज के रूट में एक फ़ाइल है , और import has from 'lodash/has'(या const has = require ('lodash/has) उस फ़ाइल को लोड करेगी। वहाँ रहे हैं NPM पर अलग विधि संकुल, लेकिन वे "डॉट वाक्य रचना" का उपयोग करें: 'lodash.has'। यह भी इसके बारे में जाने का एक वैध तरीका होगा यदि आप अपने द्वारा उपयोग की जाने वाली प्रत्येक विधि के लिए एक अलग पैकेज स्थापित करने में कोई आपत्ति नहीं करते हैं (और package.jsonपरिणामस्वरूप आप इसे बड़े पैमाने पर बना रहे हैं )।

— डेमोनेक्समैचिना

मुझे यहाँ जोड़ना है कि, यदि आप वेबपैक 2 या रोलअप (एक बंडलर जो पेड़ को झटकों का समर्थन करता है) का उपयोग करता है, तो import { has } from 'lodash'उसी तरह से काम करेगा, क्योंकि बाकी को छीन लिया जाएगा

— एलेक्स जेएम

@PDN वेबपैक 2 ट्री शेकिंग आपके लिए स्वचालित रूप से करना चाहिए

— Bill

कुछ अन्य लोगों के विपरीत, मेरा पेड़ हिलाना अधिक स्पष्ट वाक्यविन्यास के साथ काम नहीं करेगा, यह केवल तब ही था जब मैंने लेटाश-एससी पर स्विच किया और import has from 'lodash-es/has'वाक्यविन्यास का उपयोग किया मुझे पूर्ण पेड़ मिलाते हुए मिला। 526KB से 184KB पर गए, देखें stackoverflow.com/questions/41991178/…

— ब्रैंडन सोरेन कुली

Answer 2

यदि आप उपयोग कर रहे हैं webpack 4, तो निम्न कोड ट्री शेकेबल है।

import { has } from 'lodash-es';

ध्यान देने योग्य बिंदु;

1. कॉमनजेएस मॉड्यूल ट्री lodash-esशेकेबल नहीं हैं , इसलिए आपको निश्चित रूप से उपयोग करना चाहिए , जो कि लॉडैश लाइब्रेरी है, जो कॉमनजेएस के बजाय ईएस मॉड्यूल के रूप में निर्यात की जाती है lodash।

2. lodash-esपैकेज में शामिल है। "sideEffects": falseवेबसन 4 को सूचित करता है, जो कि पैकेज के अंदर की सभी फाइलें साइड इफेक्ट फ्री हैं (देखें https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side —पदार्थ-मुक्त )।

3. यह जानकारी पेड़ के झटकों के लिए महत्वपूर्ण है क्योंकि मॉड्यूल बंडलों में पेड़ों की हिलाने वाली फाइलें नहीं होती हैं, जो संभवत: साइड इफेक्ट होते हैं, भले ही उनके निर्यात किए गए सदस्य कहीं भी उपयोग नहीं किए जाते हों।

संपादित करें

संस्करण के रूप में 1.9.0, पार्सल भी समर्थन करता है "sideEffects": false , थ्रेशर import { has } from 'lodash-es';भी पार्सल के साथ वृक्ष के समान है। यह पेड़ को हिलाने वाले कॉमन जेजेएस मॉड्यूल का भी समर्थन करता है, हालांकि यह संभावना है कि मेरे प्रयोग के अनुसार ईएस मॉड्यूल के पेड़ हिलाना कॉमनजस की तुलना में अधिक कुशल है ।

Comments

मैंने अपने सभी लॉश इंपोर्ट को import { ... } from 'lodash-es'; अपने बंडल में बदल दिया, जिसमें अभी भी पूरी लाइब्रेरी शामिल है।

— इसहाक पाक

@IsaacPak सुनिश्चित करें कि आप ES मॉड्यूल को कॉमन जेजेएस में ट्रांसप्लांट नहीं कर रहे हैं। यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो आपको --moduleसंकलक विकल्प को इस प्रकार सेट करना होगा es6, es2015या esnext।

— किमामूला २ k

मैं टाइपस्क्रिप्ट का उपयोग नहीं कर रहा हूं और मेरे .babelrcv प्रीवेट को सेट किया गया है modules: falseताकि वे कॉमनजेस को ट्रांसप्लड न हों। मैं ब्रूस के समाधान का उपयोग कर रहा हूं जो अब काम कर रहा है। आपके योगदान के लिए धन्यवाद, मुझे यकीन है कि यह काम करता है लेकिन मेरे पास इसके लिए सेटअप नहीं है।

— इसहाक पाक

दुर्भाग्य से, इस बिंदु पर जेस्ट के साथ लॉश-एस का उपयोग नहीं किया जा सकता है: github.com/facebook/jest/issues/4842#issuecomment-491434065

— अपोलो

import has from 'lodash-es/has'और import {has} from 'lodash-es'दोनों वेरिएंट्स का उपयोग करते समय ट्रीशेकिंग करते हैंwebpack-4

— महापुरूष

Answer 3

घुंघराले ब्रैकेट के अंदर विशिष्ट तरीके आयात करें

import { map, tail, times, uniq } from 'lodash';

पेशेवरों:

• केवल एक आयात लाइन (कार्यों की एक सभ्य राशि के लिए)
• अधिक पठनीय उपयोग: मानचित्र () के बजाय _ (जावास्क्रिप्ट) बाद में जावास्क्रिप्ट कोड में।

विपक्ष:

• हर बार हम एक नए फ़ंक्शन का उपयोग करना चाहते हैं या किसी अन्य का उपयोग करना बंद कर देते हैं - इसे बनाए रखने और प्रबंधित करने की आवश्यकता होती है

Comments

उपयोगी उत्तर के लिए धन्यवाद। हालाँकि, मुझे _.map()यह स्पष्ट करना पसंद है कि बाह्य पुस्तकालय का उपयोग किया जा रहा है। क्या import _ from 'lodash'आपका सुझाव उतना ही कुशल है या इस वाक्यविन्यास का उपयोग करने में सक्षम होने का एक और तरीका है?

— इनवो सेवेन

@ ToivoSäwén मैं पूरी तरह से सहमत हूं और स्पष्ट _.map()वाक्य रचना को भी पसंद करता हूं । क्या आप यह सुनिश्चित करने के लिए एक तरीका पता लगाने में सक्षम हैं कि es6 आयात और पेड़-मिलाते हुए?

— राज

Answer 4

यदि आप babel का उपयोग कर रहे हैं, तो आपको babel-plugin-lodash की जांच करनी चाहिए , यह आपके लिए उपयोग किए जाने वाले लेश के हिस्सों को चेरी-पिक करेगा, कम परेशानी और एक छोटा बंडल।

इसकी कुछ सीमाएँ हैं :

• लोडश को लोड करने के लिए आपको ES2015 आयात का उपयोग करना चाहिए
• बैबल <6 & Node.js <4 समर्थित नहीं हैं
• श्रृंखला अनुक्रम समर्थित नहीं हैं। विकल्प के लिए इस ब्लॉग पोस्ट को देखें ।
• मॉड्यूलर विधि पैकेज समर्थित नहीं हैं

Answer 5

आप उन्हें आयात कर सकते हैं

import {concat, filter, orderBy} from 'lodash';

या के रूप में

import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';

दूसरा पहले की तुलना में बहुत अधिक अनुकूलित है क्योंकि यह केवल आवश्यक मॉड्यूल लोड करता है

तो इस तरह का उपयोग करें

pendingArray: concat(
                    orderBy(
                        filter(payload, obj => obj.flag),
                        ['flag'],
                        ['desc'],
                    ),
                    filter(payload, obj => !obj.flag),

Answer 6

संस्करण में Lodash आयात करें 4.17.15

import * as _ from 'lodash';