چطور حجم Bundle Size رو در React و Next.js کاهش بدیم ؟

در پروژه های React یا Next.js، یکی از مشکلات رایجی که باعث افت سرعت، تجربه کاربری ضعیف و حتی آسیب به SEO میشه، بالا بودن حجم فایل‌های نهایی (Bundle Size) هست.
در این مقاله، بصورت کامل و کاربردی بررسی میکنیم که چرا باندل سنگین میشه، چطور میشه اندازشو بررسی کرد، و چه تکنیک هایی برای بهینه سازی و کاهش حجم وجود داره.

Bundle Size چیست؟

وقتی پروژه ای با React یا Next.js بیلد میشه، تمام فایلهای جاوااسکریپت (کامپوننت ها، کتابخونه ها و…) توسط Webpack یا ابزار مشابه، به فایلهایی فشرده و نهایی تبدیل میشن. این فایلها همون چیزیه که مرورگر کاربر باید دانلود کنه تا اپ اجرا بشه.

هرچه این فایلها بزرگتر باشن:

زمان لود اولیه صفحات بیشتر میشه
فشار بیشتری روی دستگاه کاربر (مخصوصاً موبایل) میاد
احتمال رها کردن صفحه قبل از لود کامل افزایش پیدا میکنه که باعث از دست رفتن یوزر میشه
امتیاز SEO پایینتر میره

پس بهینه سازی این حجم یکی از کلیدی ترین کارها در فرانت اند مدرن محسوب میشه.

چطور حجم Bundle رو اندازه گیری کنیم؟

قبل از هر نوع بهینه سازی، باید دید که الان پروژه در چه وضعیتی قرار داره. برای این کار میشه از ابزارهایی مثل Webpack Bundle Analyzer استفاده کرد.

نصب و تنظیم در Next.js:

				
					npm install @next/bundle-analyzer

در next.config.js این تنظیمات اضافه میشه:

				
					const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // سایر تنظیمات پروژه
});

سپس با اجرای دستور زیر، ابزار تحلیلگر اجرا میشه:

				
					ANALYZE=true next build

یک رابط کاربری گرافیکی باز میشه که دقیقاً نشون میده کدام فایلها چقدر حجم دارن و چه ماژول هایی بیشترین تأثیر رو روی باندل گذاشتن.

تکنیک های عملی برای کاهش حجم Bundle

1. استفاده از Import‌ بهینه (Tree Shaking)

در بسیاری از مواقع، کتابخانه هایی وارد پروژه میشن که فقط بخشی از آنها استفاده میشه. اما اگر کل کتابخانه import بشه، کل کد وارد باندل خواهد شد.

نمونه اشتباه:

				
					import _ from 'lodash';

نمونه بهینه:

				
					import debounce from 'lodash/debounce';

این روش باعث میشه فقط تابع مورد نیاز وارد باندل بشه و حجم نهایی به شدت کاهش پیدا کنه.

2. استفاده از Dynamic Import و Code Splitting

Next.js بطور پیشفرض از Code Splitting پشتیبانی میکنه، اما میشه با استفاده از dynamic import کنترل بیشتری روی لود شدن کامپوننت ها داشت.

مثال:

				
					import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false,
});

در این روش، کامپوننت فقط زمانی لود میشه که واقعاً نیاز باشه. این تکنیک برای چارت ها، ویرایشگرهای متن، مودال ها و کامپوننت های سنگین بسیار مفیده.

3. جایگزینی کتابخانه های سنگین با نسخه‌های سبک تر

در بسیاری از موارد میشه با جایگزینی کتابخانه ها، حجم باندل را به شکل چشمگیری کاهش داد.

مثلا بجای moment.js میشه از dayjs استفاده کرد که سبکتر و بهینه تره. یا بجای lodash میشه از lodash-es که بهینه تره استفاده کرد.

4. استفاده از `next/image` برای بهینه سازی تصاویر

در پروژه هایی که از Next.js استفاده میکنن، بهتره تصاویر با کامپوننت اختصاصی Image لود بشن. این روش مزایای زیادی داره:

Lazy load پیشفرض
انتخاب خودکار فرمت WebP
اندازه گذاری خودکار بر اساس device

مثال:

				
					import Image from 'next/image';

<Image src="/frontendi.com.png" width={800} height={500} alt="Hero Image" />

5. حذف کتابخانه های بلااستفاده

با ابزارهایی مثل depcheck میشه پکیج هایی که در کد استفاده نمیشن ولی در package.json باقی موندن رو پیدا کرد و حذف کرد.

اجرای منظم این بررسی باعث میشه پروژه سبکتر و تمیزتر بمونه.

6. فعال بودن Minify و Gzip در تنظیمات نهایی

Next.js بصورت پیشفرض فایلهای جاوااسکریپت رو minify میکنه و از فشرده سازی gzip هم پشتیبانی میکنه. اما برای اطمینان بیشتر:

				
					module.exports = {
  compress: true,
  swcMinify: true, // برای نسخه‌های جدید
}

در نسخه های قدیمی میشه از Terser استفاده کرد.

7. Cache کردن هوشمندانه فایلها

هرچقدر باندل سبک بشه، باز هم اگر در هر بار باز کردن سایت، کاربر مجبور باشه فایلها رو دوباره دانلود کنه، بهینه سازی بی نتیجه میمونه.

Next.js فایلها رو با نام های منحصر بفرد (hashed filenames) تولید میکنه تا مرورگر بتونه اونها رو کش کنه. با پیکربندی مناسب سرور و CDN میشه این کش رو به خوبی مدیریت کرد.

تکنیک پیشرفته: جداسازی Vendorها (Vendor Splitting)

در پروژه های بزرگ، بهتره کدهای third-party (مثل React، lodash، و…) از کدهای نوشته شده توسط تیم جدا بشن. این کار باعث میشه هنگام deploy فقط فایل های تغییر یافته آپدیت بشن و کاربر نیازی به دانلود مجدد همه چیز نداشته باشه.

Next.js خودش تا حدی این کار رو انجام میده، اما در پیکربندی Webpack سفارشی هم میشه از این تنظیم استفاده کرد:

				
					optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

جمع بندی

کاهش حجم باندل باعث میشه پروژه سریعتر اجرا بشه، تجربه کاربری بهتر بشه، و در نهایت سئو و رتبه سایت هم بهبود پیدا کنه. امیدوارم که مقاله مفیدی بوده باشه براتون 🙂