بهینه‌سازی مصرف حافظه در Next.js – کاهش فشار حافظه در زمان توسعه و ساخت نهایی

با رشد اپلیکیشن‌های Next.js، مصرف حافظه در زمان توسعه یا ساخت نهایی ممکن است افزایش یابد. این مقاله راهکارهایی برای کاهش مصرف حافظه ارائه می‌دهد؛ از جمله کاهش وابستگی‌ها، تنظیمات Webpack، غیرفعال‌سازی آنالیز استاتیک، مدیریت source map، و ابزارهای تحلیل حافظه.

Memory OptimizationWebpackHeap SnapshotTypeScript Analysis

~3 دقیقه مطالعه · آخرین به‌روزرسانی ۶ آبان ۱۴۰۴

مقدمه


اپلیکیشن‌های بزرگ و غنی از ویژگی‌ها ممکن است در زمان توسعه یا ساخت نهایی، حافظه زیادی مصرف کنند. Next.js ابزارها و تنظیمات مختلفی برای مدیریت این موضوع ارائه می‌دهد.


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


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


۲. فعال‌سازی webpackMemoryOptimizations


از نسخه ۱۵ به بعد، می‌توانید گزینه experimental.webpackMemoryOptimizations: true را در next.config.js فعال کنید تا مصرف حافظه کاهش یابد (با کمی افزایش زمان کامپایل).


۳. اجرای build با حالت debug حافظه


از نسخه ۱۴.۲.۰ به بعد، می‌توانید دستور زیر را اجرا کنید:

next build --experimental-debug-memory-usage

این حالت اطلاعات حافظه را در طول build نمایش می‌دهد و در صورت نزدیک شدن به حد مجاز، snapshot حافظه گرفته می‌شود.


۴. ضبط heap profile


برای بررسی نشتی حافظه، دستور زیر را اجرا کنید:

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

فایل .heapprofile تولید شده را در Chrome DevTools → Memory بارگذاری کنید.


۵. تحلیل snapshot حافظه


با استفاده از NODE_OPTIONS=--inspect می‌توانید فرآیند را در DevTools بررسی کنید. همچنین می‌توانید با ارسال سیگنال SIGUSR2 در حالت debug، snapshot حافظه بگیرید.


۶. استفاده از Webpack Build Worker


از نسخه ۱۴.۱.۰ به بعد، Webpack در یک worker جداگانه اجرا می‌شود که مصرف حافظه را کاهش می‌دهد. اگر از نسخه قدیمی یا تنظیمات سفارشی Webpack استفاده می‌کنید، گزینه زیر را فعال کنید:

experimental.webpackBuildWorker: true

۷. غیرفعال‌سازی cache Webpack


برای کاهش مصرف حافظه، می‌توانید cache Webpack را غیرفعال کنید:

config.cache = Object.freeze({ type: 'memory' })

۸. غیرفعال‌سازی آنالیز استاتیک TypeScript


در پروژه‌های بزرگ، بررسی typeها ممکن است حافظه زیادی مصرف کند. برای غیرفعال‌سازی در زمان build:

typescript: {
  ignoreBuildErrors: true,
}

توجه: این گزینه ممکن است باعث انتشار کد دارای خطا شود. توصیه می‌شود فقط در محیط staging استفاده شود.


۹. غیرفعال‌سازی Source Maps


Source mapها حافظه زیادی مصرف می‌کنند. برای غیرفعال‌سازی:

productionBrowserSourceMaps: false,
experimental.serverSourceMaps: false,
enablePrerenderSourceMaps: false

۱۰. به‌روزرسانی برای رفع مشکلات Edge Runtime


نسخه ۱۴.۱.۳ مشکل حافظه در Edge Runtime را رفع کرده است. اگر از این runtime استفاده می‌کنید، به این نسخه یا بالاتر ارتقاء دهید.


۱۱. غیرفعال‌سازی Preloading در زمان شروع


برای کاهش حافظه اولیه سرور، گزینه زیر را غیرفعال کنید:

experimental.preloadEntriesOnStart: false

جمع‌بندی


با استفاده از تنظیمات و ابزارهای فوق، می‌توانید مصرف حافظه در پروژه‌های Next.js را بهینه‌سازی کنید. این اقدامات باعث افزایش پایداری، کاهش خطاهای out-of-memory و بهبود تجربه توسعه می‌شوند.


نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

ادامه

مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

ادامه

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

ادامه

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

ادامه

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

ادامه

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

ادامه