Back to Glossary

Code Splitting

تقسيم الكود (Code Splitting)

Intermediateperformance1 min read
dynamic importlazy importchunk splittingbundle splittingnext/dynamic
Official DocsSign in to save & take notes

Definition

Breaking a JavaScript bundle into smaller chunks loaded on demand, reducing initial page load time.

تقسيم حزمة JavaScript إلى أجزاء أصغر تُحمَّل عند الطلب، مما يُقلّل وقت تحميل الصفحة الأولي.

Why It Matters

The heavy GlossaryText tooltip component in 404Fault could be dynamically imported to reduce the initial JS bundle on pages that don't need tooltips.

مكوّن GlossaryText الثقيل في 404Fault يمكن استيراده ديناميكيًا لتقليل حزمة JS الأولية على الصفحات التي لا تحتاج إلى تلميحات.

Full Definition

Code splitting divides your JavaScript bundle into smaller pieces (chunks) that are loaded only when needed. In Next.js, every page is automatically a separate chunk. `next/dynamic` for client components and `React.lazy()` for component-level splitting. Reduces initial bundle size — critical for mobile users on slow connections. Heavy libraries (like chart libraries) should be dynamically imported.
تقسيم الكود يُقسّم حزمة JavaScript إلى أجزاء أصغر (chunks) تُحمَّل فقط عند الحاجة. في Next.js، كل صفحة هي chunk منفصل تلقائيًا. `next/dynamic` للمكونات من جانب العميل. يُقلّل حجم الحزمة الأولي — حيوي لمستخدمي الهاتف المحمول على اتصالات بطيئة.

Example Usage

“const GlossaryText = dynamic(() => import('@/components/glossary/GlossaryText'), { loading: () => <span>...</span>, ssr: false });”

“const GlossaryText = dynamic(() => import('@/components/glossary/GlossaryText'), { loading: () => <span>...</span>, ssr: false });”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Code Splitting:

1

Code splitting everything — adds overhead for small chunks that don't save meaningful loading time

2

Not providing loading UI — users see a blank flash while the chunk loads

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Code Splitting.

Explain:
1. What is Code Splitting and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Code splitting everything — adds overhead for small chunks that don't save meaningful loading time, Not providing loading UI — users see a blank flash while the chunk loads
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account