Compression في JavaScript (Node.js): دليل شامل مع أمثلة

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

ضغط البيانات في JavaScript (Node.js): دليل شامل مع أمثلة

1. ما هي مكتبة Compression ولماذا تحتاجها؟

مكتبة compression في Node.js هي وسيط (middleware) مخصص لإطار العمل Express (وغيره من الأطر المتوافقة)، تقوم تلقائياً بضغط استجابات HTTP باستخدام خوارزميات Gzip أو Deflate أو Brotli. تُعتبر هذه المكتبة المعيار الفعلي لتحسين أداء تطبيقات الويب في Node.js، حيث تقلل بشكل كبير من حجم البيانات المنقولة (HTML، CSS، JavaScript، JSON، الصور، وغيرها) بين الخادم والعميل.

لماذا تحتاج إليها؟ في عالم الويب الحديث، سرعة تحميل الصفحات أمر بالغ الأهمية لتجربة المستخدم وتحسين محركات البحث (SEO). ضغط البيانات يقلل حجم حركة المرور بمقدار 3 إلى 10 مرات (حسب نوع المحتوى). على سبيل المثال، ملف HTML بحجم 100 كيلوبايت بعد ضغطه بتقنية Gzip قد يصبح وزنه 10-15 كيلوبايت فقط. هذا مهم بشكل خاص لمستخدمي الهواتف المحمولة ذوي حركة المرور المحدودة، وللواجهات البرمجية (API) التي ترجع كائنات JSON كبيرة. بدون استخدام compression، سيرسل الخادم بيانات "خام"، مما يزيد وقت التحميل والضغط على الشبكة.

المكتبة تؤتمت العملية بالكامل: تفحص رأس Accept-Encoding في طلب العميل، تختار خوارزمية الضغط المناسبة (عادةً gzip أو brotli إذا كانت مدعومة)، تضغط الاستجابة، وتضيف الرؤوس المناسبة (Content-Encoding، Vary). كل ما على المطور فعله هو ربط الوسيط في سلسلة معالجة الطلبات في Express. هذا يجعل compression أداة لا غنى عنها لأي تطبيق إنتاجي في Node.js.

2. التثبيت

يتم تثبيت المكتبة عبر npm (مدير حزم Node). تأكد من تثبيت Node.js (الإصدار 12 أو أحدث). نفّذ الأمر التالي في جذر مشروعك:

npm install compression

إذا كنت تستخدم yarn:

yarn add compression

بعد التثبيت، ستكون المكتبة متاحة للاستيراد في الكود الخاص بك.

3. البداية السريعة — مثال عملي بسيط

أسهل طريقة لبدء استخدام compression هي ربطه كوسيط (middleware) في Express. إليك خادم بسيط يضغط جميع الاستجابات:

const express = require('express');
const compression = require('compression');
const app = express();
const port = 3000;

// ربط وسيط الضغط
app.use(compression());

// مسار عادي
app.get('/', (req, res) => {
  // إرسال استجابة كبيرة (تكرار النص 1000 مرة)
  const bigData = 'مرحباً بالعالم! '.repeat(1000);
  res.send(bigData);
});

app.listen(port, () => {
  console.log(`الخادم يعمل على http://localhost:${port}`);
});

بعد تشغيل الخادم (node app.js)، افتح المتصفح على http://localhost:3000. في أدوات المطور (علامة التبويب Network)، ستلاحظ أن الاستجابة مضغوطة (رأس Content-Encoding: gzip). سيكون حجم الاستجابة أصغر بعدة مرات من الحجم الأصلي.

4. الدوال/الوظائف/الفئات الرئيسية

توفر مكتبة compression وظيفة رئيسية واحدة — وهي وسيط (middleware) يتم تكوينه عبر كائن الخيارات. دعنا نستعرض 8 جوانب رئيسية للعمل معها.

4.1. compression([options]) — إنشاء الوسيط

التوقيع: compression(options?: CompressionOptions): RequestHandler

الوظيفة: تنشئ وتُعيد دالة وسيط (middleware) لـ Express. تقبل كائن اختياري يحتوي على الإعدادات.

مثال:

const compression = require('compression');
const app = require('express')();

// بدون خيارات (السلوك الافتراضي)
app.use(compression());

// مع خيارات
app.use(compression({
  level: 6,          // مستوى الضغط (0-9)
  threshold: 1024,   // عدم ضغط الاستجابات الأقل من 1 كيلوبايت
  filter: (req, res) => {
    // منطق تصفية مخصص                    

توصيات