هز الأشجار هو مصطلح شائع الاستخدام في سياق جافا سكريبت لإزالة الشفرة الميتة. يعتمد على الهيكل الثابت لبناء جملة الوحدة ES2015، أي الاستيراد والتصدير. تم تعميم الاسم والمفهوم من خلال مجموعة تجميع وحدة ES2015.

لن نتعمق في هز الأشجار (tree shaking)، فقط نتحدث عن فوائدها وأمثلة عليها. إذا كنت مطور لحزم npm، فيجب عليك التحقق من اهتزاز شجرة Webpack أو اهتزاز شجرة Rollup لمنح المستخدمين والمطورين تجربة أفضل.

يعد اهتزاز الشجرة مفهوم بسيط لتقليل حجم بنية الإنتاج للحصول على TTFB أسرع (الوقت إلى البايت الأول أو وقت تحميل الصفحة).

لماذا اهتزاز الشجرة؟ 🤔

يسمح للحزمة بتعديل بعض أجزاء كود الإنتاج لإزالة الأجزاء غير المستخدمة. تخيل أن لدينا ملف meet.js:

// meet.js
function hi() {
    ...
}
function bye() {
    ...
}

export { bye, hi }

الآن قم باستيراده في ملف آخر:

import { hi } from './meet.js'

hi();

هذه هي النقطة، ربما كنت تعتقد أننا قمنا للتو باستيراد hi، لكن ليس!! لقد استوردنا جميع Meet.js، وهذا يعني أن لدينا bye في النتائج أيضًا.. لذا فإن بنية الإنتاج بها تعليمات برمجية غير مستخدمة، لذلك لا نريد ذلك.

في بعض الحزم، نقوم بذلك أيضًا، نقوم باستيراد الأجزاء المطلوبة، ولكن في الإنتاج، لدينا كود غير مستخدم عند استخدام إتلاف الكائنات، ولكن هناك طريقة للتخلص من الشفرة غير المستخدمة!

كيف؟ 😬

هنا يمكننا استخدام tree shaking، ولكن إذا نفذت الحزمة التي نستخدمها ميزة اهتزاز الشجرة.

import { chunk } from 'lodash-es/array/chunk'

كل عبوة تقريبًا لها طريقتها في تنفيذ اهتزاز الشجرة، وهو لا يختلف كثيرًا!

للحزم الأكبر، راجع ماذا يحدث عندما لا نستخدم اهتزاز الأشجار.

import { chunk } from 'lodash-es' // No tree shaking
// 30Kb just for one function, what! 👎

import { chunk } from 'lodash-es/array/chunk' // With tree shaking
// 1Kb for one function, That's awesome 👍

// https://github.com/webpack/webpack/issues/1750

ملاحظة

هز الأشجار (tree shaking)

أعتقد أنه يجب عليك استخدام أو تنفيذ هذه الميزة لأن تقليل حجم الإصدار أمر مهم للغاية ويحب المستخدمون السرعة. في المقالة التالية، سنتكلم عن استخدام ميزة الاستيراد الديناميكي عندما تكون لديك مشكلات TTFB، وإذا كنت تستخدمها دائمًا، فستؤثر على TTFB وتبطئها أحيانًا. لكن اهتزاز الشجرة ميزة رائعة، لذا استخدمها دائمًا عندما تستطيع.

أتمنى أن تكون قد استمتعت بهذه المقالة القصيرة.

هذا المقال نشر من قبل على: Bugged🐞

محمدباقر عبيات

The one Who loves solving stuff and writing about them.

منشور ذات صلة
Scala.js 11 Minutes

استخدام Scala.js مع NPM و Browserify

جاسم ناظري

إذا كنت تستخدم Scala.js مترجم لغة Scala إلى JavaScript فقد تجد أن إدارة التبعية القياسية لـ Scala.js محدودة للغاية في عالم JavaScript الحديث. يدير Scala.js التبعيات باستخدام WebJars.

تطبيق AngularJS 12 Minutes

كيفية تدويل (internationalize) تطبيق AngularJS

جاسم ناظري

يمكن أن يشكل جعل تطبيق AngularJS متعدد اللغات الخاص بك بعض التحديات المثيرة للاهتمام ولكن بعض الأساليب يمكن أن تجعل من السهل التغلب على معظم هذه التحديات.

2 يعتقد “شجرة تهز الخير!

  1. اسماعیل شاهین

    بسم الله الرحمن الرحیم.مقال جید فی مجال کتابه البرامج الالکترونیه . مع الشکر الجزیل للکاتب الشاب و موقع الکرسی لترجمه ونشر هاذه المقالات العلمیه .

    مارس 7, 2021 - 10:30 ص
  2. محمدباقر عبيات

    شکرا حبیبي اسماعیل، بفضل الله ساوافیکم بکثیر من المقالات العلمیة و شکرا جزیلا لموقع کرسي و فریق الترجمة کرسي

    مارس 7, 2021 - 2:36 م

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة