M
MLOG
تحسين أداء React: إتقان تقليل حجم الحزمة | MLOG | MLOG

يقوم كل مسار في هذا المثال بتحميل المكون المقابل له بشكل كسول، مما يحسن وقت التحميل الأولي للتطبيق.

2. إزالة الأكواد غير المستخدمة (Tree Shaking)

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

يمكن لأدوات تجميع جافاسكريبت الحديثة مثل Webpack و Rollup إجراء عملية إزالة الأكواد غير المستخدمة تلقائيًا. لضمان عمل هذه التقنية بفعالية، من المهم استخدام وحدات ES (صيغة import و export) بدلاً من CommonJS (صيغة require). تسمح وحدات ES لأداة التجميع بتحليل الكود الخاص بك بشكل ثابت وتحديد الصادرات المستخدمة فعليًا.

مثال:

لنفترض أنك تستخدم مكتبة أدوات مساعدة تسمى lodash. بدلاً من استيراد المكتبة بأكملها:

            import _ from 'lodash';

_.map([1, 2, 3], (n) => n * 2);

استورد فقط الدوال التي تحتاجها:

            import map from 'lodash/map';

map([1, 2, 3], (n) => n * 2);

يضمن هذا أن يتم تضمين دالة map فقط في الحزمة الخاصة بك، مما يقلل من حجمها بشكل كبير.

3. الاستيراد الديناميكي (Dynamic Imports)

على غرار React.lazy()، تسمح لك عمليات الاستيراد الديناميكية (باستخدام صيغة import()) بتحميل الوحدات عند الطلب. يمكن أن يكون هذا مفيدًا لتحميل المكتبات الكبيرة أو المكونات التي لا تكون مطلوبة إلا في مواقف محددة.

مثال:

            async function handleClick() {
  const module = await import('./MyLargeComponent');
  const MyLargeComponent = module.default;
  // Use MyLargeComponent
}

في هذا المثال، سيتم تحميل MyLargeComponent فقط عند استدعاء دالة handleClick، عادةً استجابةً لإجراء من المستخدم.

4. التصغير والضغط (Minification and Compression)

يزيل التصغير (Minification) الأحرف غير الضرورية من الكود، مثل المسافات البيضاء والتعليقات والمتغيرات غير المستخدمة. أما الضغط (Compression) فيقلل من حجم الكود عن طريق تطبيق خوارزميات تجد الأنماط وتمثلها بكفاءة أكبر.

تتضمن معظم أدوات البناء الحديثة، مثل Webpack و Parcel و Rollup، دعمًا مدمجًا للتصغير والضغط. على سبيل المثال، يستخدم Webpack أداة Terser للتصغير ويمكن تكوينه لاستخدام Gzip أو Brotli للضغط.

مثال (تكوين Webpack):

            const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

يمكّن هذا التكوين التصغير باستخدام Terser والضغط باستخدام Gzip. يحدد خيار threshold الحد الأدنى للحجم (بالبايت) لضغط الملف.

5. تحسين الصور

غالبًا ما تكون الصور مساهمًا كبيرًا في حجم حزمة تطبيقك. يمكن أن يؤدي تحسين صورك إلى تحسين الأداء بشكل كبير.

تقنيات لتحسين الصور:

6. اختر المكتبات بحكمة

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

مثال:

بدلاً من استخدام مكتبة تنسيق تواريخ كبيرة مثل Moment.js، فكر في استخدام بديل أصغر مثل date-fns أو Day.js. هذه المكتبات أصغر حجمًا بشكل ملحوظ وتوفر وظائف مماثلة.

مقارنة حجم الحزمة:

7. بروتوكول HTTP/2

HTTP/2 هو إصدار أحدث من بروتوكول HTTP يقدم العديد من تحسينات الأداء على HTTP/1.1، بما في ذلك:

يمكن أن يؤدي تمكين HTTP/2 على الخادم الخاص بك إلى تحسين أداء تطبيق React بشكل كبير، خاصة عند التعامل مع العديد من الملفات الصغيرة. تدعم معظم خوادم الويب الحديثة وشبكات CDN بروتوكول HTTP/2.

8. التخزين المؤقت للمتصفح (Browser Caching)

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

قم بتكوين الخادم الخاص بك لتعيين ترويسات التخزين المؤقت المناسبة لأصولك الثابتة. تعتبر ترويسة Cache-Control هي الأهم. فهي تتيح لك تحديد المدة التي يجب أن يقوم فيها المتصفح بتخزين الأصل مؤقتًا.

مثال:

            Cache-Control: public, max-age=31536000

تخبر هذه الترويسة المتصفح بتخزين الأصل مؤقتًا لمدة عام واحد.

9. التصيير من جانب الخادم (SSR)

يتضمن التصيير من جانب الخادم (SSR) تصيير مكونات React على الخادم وإرسال HTML الأولي إلى العميل. يمكن أن يؤدي ذلك إلى تحسين وقت التحميل الأولي وتحسين محركات البحث (SEO)، حيث يمكن لمحركات البحث الزحف بسهولة إلى محتوى HTML.

تسهل أطر العمل مثل Next.js و Gatsby تنفيذ SSR في تطبيقات React الخاصة بك.

فوائد SSR:

10. التذكرة (Memoization)

التذكرة (Memoization) هي تقنية لتخزين نتائج استدعاءات الدوال المكلفة وإعادة استخدامها عند حدوث نفس المدخلات مرة أخرى. في React، يمكنك استخدام المكون عالي الرتبة React.memo() لتذكرة المكونات الوظيفية. هذا يمنع عمليات إعادة التصيير غير الضرورية عندما لا تتغير خصائص المكون (props).

مثال:

            import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Render component
  return 
{props.data}
;
});

export default MyComponent;

في هذا المثال، سيتم إعادة تصيير MyComponent فقط إذا تغيرت خاصية props.data. يمكنك أيضًا توفير دالة مقارنة مخصصة لـ React.memo() إذا كنت بحاجة إلى مزيد من التحكم في وقت إعادة تصيير المكون.

أمثلة من الواقع واعتبارات دولية

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

أدوات ومصادر

فيما يلي بعض الأدوات والمصادر المفيدة لتقليل حجم الحزمة:

الخاتمة

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

مع استمرار تطور ممارسات تطوير الويب، يعد البقاء على اطلاع بأحدث التقنيات والأدوات لتقليل حجم الحزمة أمرًا بالغ الأهمية لبناء تطبيقات React عالية الأداء تلبي متطلبات الجمهور العالمي.