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

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

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

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

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

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

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. استخدم حزم lodash لكل طريقة

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