كيفية استيراد Lodash في مشاريع JavaScript الخاصة بك للحصول على أدنى حجم حزمة

Lodash هي مكتبة JavaScript شائعة للغاية توفر الكثير من الوظائف المفيدة للعمل مع السلاسل والصفوف والكائنات في مشاريع الويب الخاصة بك.

يتم الآن دعم بعض وظائف Lodash أصليًا في JavaScript الحديثة ، لكن المكتبة لا تزال تضيف القيمة وتوفر لك الوقت.

على سبيل المثال ، إذا كنت ترغب في إنشاء رقم عشوائي بين 1 و 10 ، _.random(1, 10) الوظيفة هي طريقة رائعة للقيام بذلك ، على غرار RANDBETWEEN وظيفة أوراق Google. ال _.shuffle() يمكن أن تساعدك الوظيفة بسرعة في خلط مجموعة من القيم بسرعة.

الطريقة الصحيحة لتضمين Lodash

إذا كان مشروع JavaScript الخاص بك يتطلب Lodash ، فيمكنك تضمين المكتبة في الكود الخاص بك بـ 4 طرق مختلفة.

1. استيراد مكتبة Lodash بأكملها

import _ from "lodash";

const capitalizeFirstName = name => {
  const result = _.capitalize(name);
  console.log(response);
};

2. الاستيراد باستخدام الأسماء المستعارة المسماة

import { capitalize } from "lodash";

const capitalizeFirstName = name => {
  const result = capitalize(name);
  console.log(response);
};

3. استيراد طرق محددة حسب المسار

import capitalize from "lodash/capitalize";

const capitalizeFirstName = name => {
  const result = capitalize(name);
  console.log(response);
};

4. استخدم حزم اللواش لكل طريقة

import capitalize from "lodash.capitalize";

const capitalizeFirstName = name => {
  const result = capitalize(name);
  console.log(response);
};

ما هي طريقة الاستيراد التي ستؤدي إلى أدنى حجم حزمة؟

سيتضمن الخيار رقم 1 مكتبة Lodash بأكملها في حزمة الإخراج الخاصة بك ولا ينصح بها. سيقوم الخيار الثاني أيضًا باستيراد المكتبة الكاملة ويجب تجنبها.

ستؤدي الطريقة رقم 4 لاستيراد حزم Lodash لكل طريقة إلى أدنى حجم حزمة ، ولكن لا ينصح بها لأن هذا النهج سيتم إهماله في الإصدارات المستقبلية من Lodash.

يوصى باستخدام النهج رقم 3 لأنه سيستورد فقط طرق Lodash المحددة التي تحتاجها وكذلك تقليل حجم الحزمة.

نصيحة المكافأة: مذكرات مع Lodash

تتضمن مكتبة Lodash طريقة مذكرات تسمى _.memoize() وهو أمر مفيد لتخزين المؤقتة باهظة الثمن.

import memoize from "lodoash/memoize";

const expensiveFunction = input => {
  return input * input;
};

const memoizedFunction = memoize(expensiveFunction);

console.log(memoizedFunction(5)); // Calculates the square of 5
console.log(memoizedFunction(5)); // Returns the cached value

ومع ذلك ، هناك قيود كبيرة على المذكرة مع Lodash – لن يستخدم إلا المعلمة الأولى من الوظيفة كمفتاح ذاكرة التخزين المؤقت وتجاهل الباقي. اسمحوا لي أن أشرح.

const add = (a, b) => {
  return a + b;
};

const memoizedAdd = _.memoize(add);
console.log(memoizedAdd(1, 2)); // Calculates the sum of 1 and 2 and caches the result
console.log(memoizedAdd(1, 3)); // Returns the cached value which is 3 (incorrect)

كما قد لاحظت ، يتم تجاهل المعلمة الثانية للوظيفة وبالتالي تكون النتيجة غير صحيحة لأنها أعادت القيمة المخزنة مؤقتًا بناءً على المعلمة الأولى نفسها.

مذكرات مع معلمات متعددة

لإصلاح هذه المشكلة ، يمكنك استخدام مكتبة مذكرات بديلة مثل fast-memoize أو يمكنك إضافة وظيفة حل إلى طريقة التذاكر كما هو موضح أدناه.

const multiply = (a, b) => {
  return a * b;
};

const resolver = (...args) => {
  return JSON.stringify(args);
};

const memoizedMultiply = _.memoize(multiply, resolver);

console.log(memoizedMultiply(1, 2)); // Calculates the product of 1 and 2 and caches the result
console.log(memoizedMultiply(1, 3)); // Calculates the product of 1 and 3 and caches the result
console.log(memoizedMultiply(1, 2)); // Returns the cached value