লোডাশ আমদানির সঠিক উপায়

Question

আমার নীচে একটি টান অনুরোধের প্রতিক্রিয়া ছিল, কেবল ভাবছেন যে লোডাশ আমদানির সঠিক উপায় কোন উপায়?

আপনার 'লোডাশ / হ্যাজ' থেকে আমদানিটি আরও ভাল হবে ... নিজের আগে ভারী ভারী লোডাস (ভি 3) এর পূর্ববর্তী সংস্করণটির জন্য, আমাদের কেবল পুরো লোড্যাশ লাইব্রেরি আমদানির পরিবর্তে একটি নির্দিষ্ট মডিউল / ফাংশন আমদানি করা উচিত। নতুন সংস্করণ (v4) সম্পর্কে নিশ্চিত নয়।

import has from 'lodash/has';

বনাম

import { has } from 'lodash';

ধন্যবাদ

Comments

উত্তরটি কেন ওয়েবপ্যাকের মতো কিছু পরিবেশে এখনও পারফরম্যান্স অপটিমাইজেশন নিতে পারে তা আরও গভীরভাবে আলোচনার জন্য এই উত্তরটি দেখুন । এটি স্থির বিশ্লেষণ এবং গাছ কাঁপানোর ব্যবহারের কারণে।

— প্যাট্রিক রবার্টস

Answer 1

import has from 'lodash/has';আরও ভাল কারণ লোডাশ তার সমস্ত ফাংশনকে একটি ফাইলে ধারণ করে, তাই পুরো 'লোড্যাশ' লাইব্রেরিটি 100k তে আমদানি না করে কেবল লোডাশের hasফাংশনটি আমদানি করা আরও ভাল যা সম্ভবত 2k।

Comments

@ জর্জক্যাটসানোস আপনি কেবল যে ফাংশনটি ব্যবহার করতে চান তা আমদানি করুন, আপনার '_' দরকার নেই

— বিল

@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'একইভাবে কাজ করবে, যেহেতু বাকী অংশগুলি ছিটকে যাবে

— অ্যালেক্স জেএম

@ পিডিএন ওয়েবপ্যাক 2 টি গাছ কাঁপানো আপনার জন্য এটি স্বয়ংক্রিয়ভাবে করা উচিত

— বিল

কারও কারও মত নয়, আমার গাছ কাঁপানো আরও সুস্পষ্ট বাক্য গঠন নিয়ে কাজ করবে না, লোডাশ-এস-এ সরে যাওয়ার পরে এবং import has from 'lodash-es/has'সিনট্যাক্স ব্যবহার করার পরেই আমি পুরো গাছের কাঁপানো পেয়েছি। 526KB থেকে 184KB থেকে গিয়েছিলাম দেখতে stackoverflow.com/questions/41991178/...

— ব্রান্ডন সোরেন Culley

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. এই তথ্য গাছ কাঁপানোর জন্য অত্যন্ত গুরুত্বপূর্ণ কারণ মডিউল বান্ডেলরা ফাইল ঝাঁকানো ফাইলগুলিতে গাছের ঝাঁকুনি না দেয় যা সম্ভবত তাদের রফতানিকারক সদস্যদের কোথাও ব্যবহার না করা হলেও পার্শ্ব প্রতিক্রিয়া ধারণ করে।

সম্পাদন করা

সংস্করণ ১.৯.০ অনুসারে, পার্সেল এছাড়াও সমর্থন করে"sideEffects": false , হুমকিরুপ import { has } from 'lodash-es';পার্সেলের সাথে গাছের কাঁপানোও সম্ভব। এটি বৃক্ষ কাঁপানো কমনজেএস মডিউলগুলিকেও সমর্থন করে, যদিও এটি সম্ভবত আমার পরীক্ষা অনুসারে ইএস মডিউলগুলির গাছ কাঁপানো সাধারণ জেএসের চেয়ে বেশি দক্ষ ।

Comments

আমি আমার সমস্ত লোটাস আমদানি আমার বান্ডলে রূপান্তরিত করে import { ... } from 'lodash-es'; এখনও পুরো লাইব্রেরি অন্তর্ভুক্ত।

— ইসহাক পাক

@ আইসাকপাক নিশ্চিত করুন যে আপনি ইএস মডিউলগুলি কমনজেএসে স্থানান্তর করছেন না। আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করে থাকেন তবে আপনাকে --moduleহিসাবে সংকলক বিকল্পটি সেট করতে হবে es6, es2015বা esnext।

— কিমমুল

আমি টাইপস্ক্রিপ্ট ব্যবহার করছি না এবং আমার .babrcrc এনভিটি প্রিসেট সেট করা আছে modules: falseযাতে সেগুলি কমনজেএসে স্থানান্তরিত না করে । আমি এখন ব্রুসের সমাধান ব্যবহার করছি যা মনে হচ্ছে এটি কার্যকর হয়। আপনার অবদানের জন্য ধন্যবাদ, আমি নিশ্চিত এটি কার্যকর হয় তবে আমার এটির জন্য সেটআপ নেই।

— ইসহাক পাক

: দুর্ভাগ্যবশত, এই সময়ে বিদ্রূপের বিষয় রূপে গ্রহণ সঙ্গে lodash-স্প্যানিশ ভাষায় ব্যবহার করতে পারবেন না 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';

পেশাদাররা:

• কেবলমাত্র একটি আমদানি লাইন (একটি শালীন পরিমাণের ফাংশনের জন্য)
• আরও পঠনযোগ্য ব্যবহার: পরে জাভাস্ক্রিপ্ট কোডে _.map () এর পরিবর্তে মানচিত্র ()।

কনস:

• প্রতিবার আমরা কোনও নতুন ফাংশন ব্যবহার করতে চাইলে বা অন্যটি ব্যবহার বন্ধ করতে চাই - এটি বজায় রাখা এবং পরিচালনা করা দরকার

Comments

দরকারী উত্তরের জন্য ধন্যবাদ। যাইহোক, আমি _.map()বাক্য গঠনটি পরিষ্কার করতে চাই যে একটি বাহ্যিক গ্রন্থাগার ব্যবহৃত হচ্ছে। কি import _ from 'lodash'আপনার পরামর্শের যেমন সমানভাবে দক্ষ অথবা এই সিনট্যাক্স ব্যবহার করতে পারবেন হচ্ছে আর উপায় নেই?

— টোইভো সোয়ান

@ ToivoSäwén আমি সম্পূর্ণরূপে সম্মত এবং _.map()পাশাপাশি সুস্পষ্ট বাক্য গঠন পছন্দ করি । এস -6 আমদানি এবং গাছ কাঁপানোর সময় আপনি কী এটি বজায় রাখার কোনও উপায় বের করতে পেরেছিলেন?

— রাজ

Answer 4

আপনি যদি ব্যাবেল ব্যবহার করছেন তবে আপনার ব্যাবেল-প্লাগ-ইন-লডাশ পরীক্ষা করা উচিত ব্যাবেল ব্যবহার করছেন তবে আপনার , এটি আপনার জন্য ব্যবহৃত লোডাসের অংশগুলি কম ঝামেলা এবং একটি ছোট বান্ডিল চেরি-বাছাই করবে।

এর কয়েকটি সীমাবদ্ধতা রয়েছে :

• লোডাশ লোড করতে আপনাকে অবশ্যই ES2015 আমদানি ব্যবহার করতে হবে
• ব্যাবেল <6 & নোড.জেএস <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),