استفاده از حافظه

با رشد برنامه‌ها و افزایش قابلیت‌های آن‌ها، ممکن است در توسعه محلی developing locally یا ایجاد نسخه‌های production، منابع بیشتری را طلب کنند.

بیایید به بررسی برخی استراتژی‌ها و تکنیک‌های بهینه‌سازی حافظه و رفع مشکلات رایج حافظه در Next.js بپردازیم.

کاهش تعداد وابستگی‌ها

برنامه‌هایی با تعداد زیادی وابستگی، حافظه بیشتری مصرف می‌کنند.

ابزار Bundle Analyzer می‌تواند به شما در بررسی وابستگی‌های بزرگ در برنامه‌تان که ممکن است برای بهبود عملکرد و مصرف حافظه حذف شوند، کمک کند.

اجرای next build با --experimental-debug-memory-usage

از نسخه 14.2.0 به بعد، می‌توانید next build --experimental-debug-memory-usage را اجرا کنید تا فرآیند ساخت را در حالتی اجرا کنید که Next.js به طور مداوم در طول ساخت، اطلاعاتی در مورد مصرف حافظه مانند استفاده از هیپ (heap usage) و آمار جمع‌آوری زباله (garbage collection) چاپ می‌کند. همچنین، اسنپ‌شات‌های هیپ زمانی که مصرف حافظه به حد پیکربندی‌شده نزدیک می‌شود، به طور خودکار گرفته می‌شوند.

خوب است بدانید: این ویژگی با گزینه کارگر ساخت Webpack (Webpack build worker) که به طور خودکار فعال می‌شود سازگار نیست، مگر اینکه پیکربندی سفارشی Webpack داشته باشید.

ضبط یک heap profile

برای دیدن مشکلات حافظه، می‌توانید یک پروفایل هیپ از Node.js ضبط کرده و آن را در ابزار DevTools کروم بارگذاری کنید تا منابع بالقوه نشت حافظه را شناسایی کنید.

در ترمینال خود، هنگام شروع ساخت Next.js، پرچم --heap-prof را به Node.js پاس بدهید:

node --heap-prof node_modules/next/dist/bin/next build

در انتهای ساخت، یک فایل .heapprofile توسط Node.js ایجاد می‌شود.

در DevTools کروم، می‌توانید تب Memory را باز کرده و روی دکمه "Load Profile" کلیک کنید تا فایل را مشاهده کنید.

تحلیل اسنپ‌شات هیپ

می‌توانید از یک ابزار inspection برای تجزیه و تحلیل مصرف حافظه برنامه استفاده کنید.

هنگام اجرای دستور next build یا next dev، NODE_OPTIONS=--inspect را به ابتدای دستور اضافه کنید. این کار عامل inspection را روی پورت پیش‌فرض در دسترس قرار می‌دهد.

اگر می‌خواهید قبل از شروع هر کد کاربری متوقف شوید، می‌توانید به جای آن --inspect-brk را پاس دهید. در حالی که فرآیند در حال اجرا است، می‌توانید از ابزاری مانند Chrome DevTools برای اتصال به پورت اشکال‌زدایی برای ضبط و تحلیل یک اسنپ‌شات از هیپ استفاده کنید تا ببینید چه حافظه‌ای نگهداری می‌شود.

از نسخه 14.2.0 به بعد، همچنین می‌توانید next build را با پرچم --experimental-debug-memory-usage اجرا کنید تا گرفتن اسنپ‌شات‌های هیپ آسان‌تر شود.

در حالی که در این مود اجرا می‌شوید، می‌توانید در هر نقطه‌ای سیگنال SIGUSR2 را به فرآیند ارسال کنید و فرآیند process یک اسنپ‌شات هیپ می‌گیرد.

اسنپ‌شات هیپ در ریشه پروژه برنامه Next.js ذخیره می‌شود و می‌تواند در هر آنالیزگر هیپ، مانند Chrome DevTools، بارگذاری شود تا ببینید چه حافظه‌ای نگهداری می‌شود. این حالت هنوز با Webpack build workers سازگار نیست.

برای اطلاعات بیشتر به نحوه ضبط و تحلیل اسنپ‌شات‌های هیپ (opens in a new tab) مراجعه کنید.

Webpack build worker

کارگر ساخت Webpack به شما امکان می‌دهد تا کامپایل‌های Webpack را داخل یک کارگر Node.js جداگانه اجرا کنید که باعث کاهش مصرف حافظه برنامه شما در طول ساخت می‌شود.

این گزینه به طور پیش‌فرض فعال است اگر برنامه شما از نسخه v14.1.0 به بعد، پیکربندی سفارشی Webpack نداشته باشد.

اگر از نسخه قدیمی‌تر Next.js استفاده می‌کنید یا پیکربندی سفارشی Webpack دارید، می‌توانید این گزینه را با تنظیم experimental.webpackBuildWorker: true داخل فایل next.config.js خود فعال کنید.

خوب است بدانید: این ویژگی ممکن است با همه افزونه‌های سفارشی Webpack سازگار نباشد.

غیرفعال کردن کش Webpack

Webpack cache (opens in a new tab) ماژول‌های تولید شده Webpack را در حافظه و/یا روی دیسک ذخیره می‌کند تا سرعت ساخت را بهبود بخشد. این کار می‌تواند به عملکرد کمک کند، اما همچنین باعث افزایش مصرف حافظه برنامه شما برای ذخیره داده‌های کش می‌شود.

می‌توانید با افزودن یک پیکربندی سفارشی Webpack به برنامه خود، این رفتار را غیرفعال کنید:

/** @type {import('next').NextConfig} */
const nextConfig = {
	webpack: (
		config,
		{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
	) => {
		if (config.cache && !dev) {
			config.cache = Object.freeze({
				type: 'memory',
			})
			config.cache.maxMemoryGenerations = 0
		}
		// Important: return the modified config
		return config
	},
}
 
export default nextConfig

غیرفعال کردن source maps

تولید نقشه‌های منبع (source maps) در طول فرآیند ساخت build، حافظه بیشتری مصرف می‌کند.

می‌توانید با اضافه کردن productionBrowserSourceMaps: false و experimental.serverSourceMaps: false به پیکربندی Next.js خود، تولید نقشه‌های منبع را غیرفعال کنید.

خوب است بدانید: برخی از افزونه‌ها ممکن است نقشه‌های منبع را روشن کنند و برای غیرفعال کردن آن‌ها ممکن است پیکربندی سفارشی نیاز باشد.

مشکلات حافظه در Edge

Next.js v14.1.3 یک مشکل حافظه را هنگام استفاده از محیط اجرای Edge برطرف کرد. لطفاً برای بررسی حل شدن مشکل خود، به این نسخه (یا بالاتر) به‌روزرسانی کنید.