Frontend Academy · درس

esbuild: السرعة والقيود

استخدم esbuild كأداة bundler مستقلة، وافهم سبب تفوق سرعته على webpack بأضعاف كبيرة، إلى جانب قيوده الحالية المتعلقة بالإضافات والأنواع

esbuild: السرعة والقيود درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هو esbuild؟

esbuild هو أداة تجميع وتصغير مكتوبة بلغة Go. وتفوق سرعتها أدوات التجميع المعتمدة على JavaScript بمقدار يتراوح بين 10 و100 مرة، بفضل تعدد الخيوط الأصلي وانعدام تكلفة بدء التشغيل تقريبًا. أنشأها Evan Wallace من Figma.

مقارنات السرعة

عند تجميع مصدر React (نحو 6 ميغابايت): يستغرق esbuild نحو 0.4 ثانية، وWebpack نحو 9 ثوانٍ، وRollup نحو 6 ثوانٍ، وParcel نحو 10 ثوانٍ. تعود هذه السرعة إلى: Go (لغة مُصرَّفة)، والتوازي، وعدم تحويل AST بين المراحل، وبساطة البنية.

استخدام esbuild مباشرةً

يمكن تثبيت esbuild وتشغيله من CLI.

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

واجهة API البرمجية

يمكن استخدامه من نص بناء لمنحكم تحكمًا أكبر.

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

TypeScript من دون tsc

يزيل esbuild بنية TypeScript (ويحوّل ‎.ts إلى ‎.js) بسرعة أكبر بكثير من tsc. لكنه لا يتحقق من الأنواع — شغّلوا tsc --noEmit منفصلًا لإجراء ذلك.

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

خادم تطوير مع إعادة التحميل الفوري

يحتوي esbuild على خادم تطوير مضمّن مع وضع المراقبة وHMR عبر context API.

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

بنية الإضافات

يدعم esbuild الإضافات من خلال خطّافين رئيسيين: onResolve (لاعتراض عملية حلّ الوحدات) وonLoad (لتوفير محتوى الوحدات التي جرى حلّها).

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

أدوات التحميل

يحتوي esbuild على أدوات تحميل مضمّنة للأنواع التالية: js وts وjsx وtsx وjson وcss وtext وbase64 وdataurl وfile وbinary. يقتصر دعم CSS على التجميع فقط (من دون الوحدات ومن دون PostCSS) — استخدموا إضافة أو أداة أخرى.

القيود مقارنةً بـ Rollup وVite

1) منظومة الإضافات أصغر. 2) مسار معالجة CSS محدود — فلا توجد CSS Modules أو PostCSS أو معالجات مسبقة مضمّنة. 3) لا يتوفر HMR لأطر العمل (إذ تحتاج أطر مثل React وVue إلى HMR خاص بالإطار). 4) لا توجد تحذيرات أو تحليلات بشأن tree-shaking. 5) أقل نضجًا في إعدادات SSR المعقدة.

متى يتألق esbuild

1) تجميع المكتبات (نقطة دخول واحدة ومن دون إطار عمل). 2) حزم Lambda وWorker (لبدء تشغيل بارد محدود). 3) أداة فرعية داخل Vite أو tsup (تُستخدم لتحويل TypeScript في الخلفية). 4) الانتقال من tsc إلى مسار أسرع لمعالجة TypeScript.

esbuild داخل الأدوات الأخرى

يستخدم Vite أداة esbuild لتحويل TypeScript وJSX أثناء التطوير وللتجميع المسبق لـ node_modules. ويستخدم tsup أداة esbuild لتجميع المكتبات. كما يتوفر لـ Rollup إضافة esbuild. تجمع أدوات كثيرة بين سرعة esbuild وتجربة الاستخدام الخاصة بها.

tsup — غلاف esbuild الملائم للمكتبات

لنشر مكتبات npm، يغلّف tsup أداة esbuild بإعدادات افتراضية مناسبة: يُصدر CJS وESM و‎.d.ts، ويدعم المراقبة أثناء التطوير، ويقبل إعدادًا بسيطًا.

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

المفاضلة في حجم الحزمة

يُجري esbuild التصغير بسرعة، لكن تصغيره أقل شدةً قليلًا من Terser. شغّلوا Terser كخطوة لاحقة للحصول على أصغر ناتج ممكن، إذا كان الحجم أهم من سرعة البناء.

تحقق سريع

يمكن لـ esbuild أن يحل محل tsc في تجميع TypeScript — لكن ما الذي لا يفعله esbuild مما يفعله tsc؟

مراجعة سريعة: esbuild

أداة تجميع مبنية بلغة Go، وتفوق أدوات تجميع JS سرعةً بمقدار يتراوح بين 10 و100 مرة. تتوفر عبر CLI وواجهة API البرمجية. تزيل بنية TS (من دون التحقق من الأنواع — شغّلوا tsc --noEmit). خطّافات الإضافات: onResolve وonLoad. القيود: منظومة إضافات محدودة، ومسار CSS بسيط، وعدم توفر HMR لأطر العمل. الأفضل لاستخدامها في: المكتبات وLambda وWorkers، وداخل Vite أو tsup. استخدموا غلاف tsup لمكتبات npm.

الأسئلة الشائعة

هل درس «esbuild: السرعة والقيود» مجاني؟

نعم — نص درس «esbuild: السرعة والقيود» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «esbuild: السرعة والقيود»؟

استخدم esbuild كأداة bundler مستقلة، وافهم سبب تفوق سرعته على webpack بأضعاف كبيرة، إلى جانب قيوده الحالية المتعلقة بالإضافات والأنواع تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «esbuild: السرعة والقيود»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy