بهینه‌سازی بسته‌بندی پکیج‌ها در Next.js – تحلیل، کاهش حجم، و کنترل دقیق وابستگی‌ها

مقدمه

بسته‌بندی (Bundling) پکیج‌های خارجی نقش مهمی در عملکرد اپلیکیشن دارد. Next.js به‌صورت پیش‌فرض پکیج‌هایی که در Server Components و Route Handlers استفاده می‌شوند را باندل می‌کند. با این حال، می‌توان با ابزارها و تنظیمات پیشرفته، این فرآیند را بهینه‌تر کرد.

تحلیل باندل‌های جاوااسکریپت

پلاگین @next/bundle-analyzer ابزاری برای بررسی اندازه باندل‌ها و وابستگی‌هاست. با استفاده از آن می‌توانید پکیج‌های سنگین را شناسایی و حذف یا به‌صورت lazy-load بارگذاری کنید.

نصب

npm i @next/bundle-analyzer

پیکربندی در next.config.js

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

module.exports = withBundleAnalyzer({})

تولید گزارش

ANALYZE=true npm run build

گزارش به‌صورت گرافیکی در مرورگر باز می‌شود و می‌توانید ساختار باندل‌ها را بررسی کنید.

بهینه‌سازی import پکیج‌ها

برخی پکیج‌ها مانند کتابخانه‌های آیکون، صدها ماژول صادر می‌کنند. برای جلوگیری از بارگذاری غیرضروری، از گزینه optimizePackageImports استفاده کنید:

experimental: {
  optimizePackageImports: ['icon-library'],
}

Next.js برخی کتابخانه‌ها را به‌صورت خودکار بهینه می‌کند و نیازی به افزودن آن‌ها به لیست نیست.

خارج کردن پکیج‌ها از باندل سرور

پکیج‌هایی که در Server Components و Route Handlers استفاده می‌شوند به‌صورت پیش‌فرض باندل می‌شوند. برای جلوگیری از این کار، از گزینه serverExternalPackages استفاده کنید:

serverExternalPackages: ['package-name']

Next.js برخی پکیج‌های ناسازگار را به‌صورت خودکار از باندل خارج می‌کند.

جمع‌بندی

با تحلیل باندل‌ها، بهینه‌سازی importها، و کنترل دقیق بسته‌های سرور، می‌توانید عملکرد اپلیکیشن Next.js خود را به‌طور چشمگیری بهبود دهید. این اقدامات به کاهش حجم جاوااسکریپت، افزایش سرعت بارگذاری، و تجربه بهتر کاربر منجر می‌شوند.