cssChunking

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

يمكنك التحكم في كيفية تقسيم ملفات CSS باستخدام خيار experimental.cssChunking في ملف next.config.js الخاص بك:

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // default
  },
} satisfies NextConfig

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: true, // default
  },
}

module.exports = nextConfig

الخيارات

• true (الافتراضي): سيحاول Next.js دمج ملفات CSS عندما يكون ذلك ممكنًا، مع تحديد التبعيات الصريحة والضمنية بين الملفات من ترتيب الاستيراد لتقليل عدد الأجزاء وبالتالي عدد الطلبات.
• false: لن يحاول Next.js دمج أو إعادة ترتيب ملفات CSS الخاصة بك.
• 'strict': سيحمّل Next.js ملفات CSS بالترتيب الصحيح الذي تم استيرادها به في ملفاتك، مما قد يؤدي إلى المزيد من الأجزاء والطلبات.

قد تفكر في استخدام 'strict' إذا واجهت سلوكًا غير متوقع في CSS. على سبيل المثال، إذا قمت باستيراد a.css و b.css في ملفات مختلفة باستخدام ترتيب استيراد مختلف (a قبل b، أو b قبل a)، فإن true سيدمج الملفات بأي ترتيب وسيفترض أنه لا توجد تبعيات بينها. ومع ذلك، إذا كان b.css يعتمد على a.css، فقد ترغب في استخدام 'strict' لمنع دمج الملفات، وبدلاً من ذلك تحميلها بالترتيب الذي تم استيرادها به - مما قد يؤدي إلى المزيد من الأجزاء والطلبات.

بالنسبة لمعظم التطبيقات، نوصي باستخدام true لأنه يؤدي إلى عدد أقل من الطلبات وأداء أفضل.