skill

محسن حزمة Next

تدقيق وتقليل عمل التحميل الأولي لمتصفح Next.js. يستخدم لمعالجة بطء بدء المسار، حزم العميل كبيرة الحجم، تبعيات المتصفح المكررة، أو الميزات التي يمكن أن تنتظر التفاعل.

Vercel0+ تثبيتموثوق

نبذة

# محسن الحزم

## 1. تحديد النطاق

يحلل التطبيق بأكمله افتراضيا، ويغطي جميع المسارات والتبعيات المشتركة للعميل. ضيق النطاق فقط عندما يحدد المستخدم مسارا أو تبعية أو ميزة أو مجموعة فرعية أخرى. اختر وضع **التدقيق** أو **الإصلاح**. التدقيق هو الوضع الافتراضي: ينشئ مخرجات المحلل ويبلغ عن المرشحين مع ترك مصدر التطبيق والتبعيات وملفات القفل دون تغيير. يتطلب وضع الإصلاح طلبا صريحا لتغيير التطبيق. اسأل قبل تغيير السلوك المرئي أو التوقيت أو التوافق أو حدود الثقة. بالنسبة ل App Shell الثابت للمسار، استخدم [`next-cache-components-optimizer`](https://github.com/vercel/next.js/tree/canary/skills/next-cache-components-optimizer)؛ قم بتثبيته أولا إذا لم يكن متاحا (`npx skills add https://github.com/vercel/next.js/tree/canary/skills/next-cache-components-optimizer`). لأعمال الجلب المسبق للتنقل، استخدم [`next-partial-prefetching-optimizer`](https://github.com/vercel/next.js/tree/canary/skills/next-partial-prefetching-optimizer)؛ قم بتثبيته أولا إذا لم يكن متاحا (`npx skills add https://github.com/vercel/next.js/tree/canary/skills/next-partial-prefetching-optimizer`).

**تم:** تم تسجيل النطاق المحدد من قبل المستخدم أو نطاق التطبيق بأكمله، والوضع، والسلوك المقصود. طلب التقاط أو تصدير البيانات هو وضع تدقيق، وليس إذنا للإصلاح.

## 2. التقاط وتصدير خط أساس

شغل من دليل التطبيق باستخدام مدير الحزم الخاص به. اقرأ `next analyze --help` لخيارات الالتقاط و `next analyze export --help` لخيارات إعادة التشغيل في CLI المثبت. أعد استخدام لقطة محفوظة مختارة، أو التقط باسم مميز أولا؛ ثم قم بتصديرها عبر gzip بمستوى الضغط الافتراضي. احتفظ بملفات `.jsonl.gz` قبل/بعد منفصلة.

**متطلب Sandbox:** إذا كان sandbox الخاص بالوكيل يمنع ربط منفذ TCP (كما يفعل Codex)، فيجب عليه تشغيل التقاط `next analyze --output` خارج ال sandbox. لا تحاول الالتقاط داخل هذا ال sandbox، على الرغم من أن `--output` لا يقدم واجهة مستخدم المحلل.

شغل المسار في Bash:

```bash set -o pipefail # Capture only when a new baseline is needed pnpm exec next analyze --output --snapshot 'audit-before-unique-1' pnpm exec next analyze export --snapshot 'audit-before-unique-1' | gzip > /tmp/analyze-app-before.jsonl.gz ```

`--output` ينشئ ويحفظ مخرجات ثنائية/واجهة مستخدم دون تقديمها. `next analyze export` يقرأ لقطة محفوظة دون بناء؛ يكون الإخراج القياسي (stdout) سجل JSON واحدا مكتوبا لكل سطر، مع وجود أخطاء على الإخراج القياسي للأخطاء (stderr). احذف `--route` لتحليل التطبيق بأكمله؛ أضفه لمسار محدد من قبل المستخدم. يحافظ مرشح المسار على الرسم البياني لوحدة التطبيق بأكمله، لذا قم بتحديد نطاقه في الخطوة التالية.

بالنسبة ل `distDir` مخصص، أعد التشغيل باستخدام `--dist-dir <configured-directory>` (نسبي أو مطلق): الالتقاط يحمل تكوين التطبيق، وإعادة التشغيل لا يفعل ذلك. `--snapshot <name>` يختار اسما محتفظا به؛ الإغفال يختار أحدث لقطة. ينشئ الالتقاط اسما فريدا للطابع الزمني عند إغفاله، و**يستبدل** التقاطا موجودا عند إعادة استخدام اسم صريح. استخدم أسماء مميزة قبل/بعد، بما في ذلك الأسماء التي تحتوي على مسافات، للحفاظ على كلا خطي الأساس. للاستكشاف التفاعلي، التقط بدون `--output` لتقديم واجهة المستخدم؛ `next build --analyze` ينتج أيضا بيانات قابلة لإعادة التشغيل.

**تم:** تم تحديد الالتقاط المختار، ونجح التصدير، وتم تسجيل ملف خط الأساس، واسم اللقطة، ونطاق التحليل. تحقق من حالة خروج المسار بأكمله قبل معالجة الملف المضغوط: `pipefail` يمنع gzip من إخفاء تصدير فاشل. يتحقق التصدير من مسار واحد في كل مرة، لذا يمكن أن يترك الفشل أرشيفا جزئيا حتى لو قبله `gzip -t`. تجاهل الإخراج عند فشل التصدير أو gzip.

## 3. تفسير الأدلة

حل المخطط من **Next.js المثبت** للتطبيق، باستخدام مشغل Node الخاص به:

```bash pnpm exec node -p "require.resolve('next/analyze/graph-v1.schema.json')" ```

اقرأ أوصافه لمعاني السجلات، والوصلات، والإسناد، والتغطية. قم بفك ضغط التدفق باستخدام `gzip -dc /tmp/analyze-app-before.jsonl.gz` في نص برمجي تحليلي موجه بالأسطر بدلا من تحميل التفريغ بأكمله في السياق. استخدم المخطط لتفسير مساهمات العميل/الخادم عبر كل مسار في النطاق واختيار المقياس.

**تم:** تم تحديد مساهمات العميل/الخادم المنسوبة للمسار في خط الأساس والمقياس. تعامل مع هذا على أنه **دليل بناء**: المطالبات المتعلقة بطلبات المتصفح المرصودة، أو التوقيت، أو توفير النقل تحتاج إلى دليل منفصل.

## 4. شرح مرشح

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

### المجتمع ← تمرير القطع الأدنى

لعمليات التدقيق الواسعة التي تبحث عن فرص عبر ميزات متعددة أو قائمة مساهمين كبيرة، قم بتشغيل **اكتشاف المجتمع ← اختيار الهدف ← القطع الأدنى الموجه ← التحقق من المصدر** بعد الترتيب الأولي. اقرأ [طرق الرسم البياني](references/graph-methods.md) قبل إنشاء الرسم البياني أو تشغيل الحلول.

1. رتب المجتمعات المكتشفة حسب مساهمة إخراج العميل في النطاق.

التثبيت

شغل هذا الأمر

git clone https://github.com/vercel/next.js && cp -r next.js/skills/next-bundle-optimizer ~/.claude/skills/

يعمل مع

claude appclaude codeclaude apicursorcodexwindsurfclinezed

خطوات التثبيت

استنسخ المستودع وانسخ مجلد `skills/next-bundle-optimizer` إلى دليل مهارات Claude الخاص بك. متوافق مع Claude Code وCursor وCodex وأي وكيل متوافق مع Agent Skills.

عرض المصدر
الرخصة: MITبواسطة Vercel

أسئلة شائعة

ما هي مهارة محسن حزمة Next؟

تدقيق وتقليل عمل التحميل الأولي لمتصفح Next.js. يستخدم لمعالجة بطء بدء المسار، حزم العميل كبيرة الحجم، تبعيات المتصفح المكررة، أو الميزات التي يمكن أن تنتظر التفاعل.

كيف أثبت محسن حزمة Next؟

شغل هذا الأمر في الطرفية:

git clone https://github.com/vercel/next.js && cp -r next.js/skills/next-bundle-optimizer ~/.claude/skills/
مع أي أدوات ذكاء اصطناعي تعمل محسن حزمة Next؟

تعمل مع claude_app، claude_code، claude_api، cursor، codex، windsurf، cline، zed.

من طور محسن حزمة Next؟

طورها Vercel، وتصدر بترخيص MIT.

هل محسن حزمة Next مجانية؟

نعم، يمكنك استخدامها مجانا وفق ترخيص MIT.

أصول ذات صلة

مختارات أخرى في التطوير والبرمجة.

كل بدائل محسن حزمة Next ←
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/claude-api ~/.claude/skills/
واجهة برمجة تطبيقات Claude
مرجع ل Claude API / Anthropic SDK — معرفات النماذج، التسعير، المعاملات (params)، البث (streaming)، استخدام الأدوات، MCP، الوكلاء (agents)، التخزين الم…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
npx skills add mattpocock/skills
تطوير مدفوع بالاختبار
التطوير الموجه بالاختبار. يستخدم عندما يرغب المستخدم في بناء ميزات أو إصلاح أخطاء بأسلوب "الاختبار أولا"، أو يذكر "red-green-refactor"، أو يريد اختبار…1,046,962+
skillclaude_appclaude_codeclaude_api
npx skills add mattpocock/skills
الشواء
استجوب المستخدم بلا هوادة حول خطة أو قرار أو فكرة. استخدمها عندما يرغب المستخدم في اختبار مدى متانة تفكيره، أو يستخدم أي عبارات تحفيزية مثل "استجواب".869,010+
skillclaude_appclaude_codeclaude_api
npx skills add mattpocock/skills
تشخيص الأخطاء
حلقة تشخيص للأخطاء الصعبة وتراجعات الأداء. تستخدم عندما يقول المستخدم "شخص/صحح هذا"، أو يبلغ عن شيء معطل/يصدر أخطاء/فاشل/بطيء.746,030+
skillclaude_appclaude_codeclaude_api
npx skills add mattpocock/skills
مراجعة الكود
راجع التغييرات منذ نقطة ثابتة (التزام، فرع، وسم، أو قاعدة دمج) على محورين: المعايير (هل يتبع الكود معايير الترميز الموثقة لهذا المستودع؟) والمواصفات (…696,572+
skillclaude_appclaude_codeclaude_api
npx skills add microsoft/azure-skills
تحضير Azure
يعد مشاريع Azure المستندة إلى azd للنشر: ينشئ ملفات azure.yaml والبنية التحتية (Bicep/Terraform) وملفات Dockerfile لسير عمل Azure Developer CLI (azd).…618,675+

افحص قبل التثبيت

شغل أي مصدر عبر فحوصاتنا - الظهور في الذكاء الاصطناعي والأمان والأداء واكتشاف التقنيات.

المزيد في التطوير والبرمجة