مقدمه
بستهبندی (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 خود را بهطور چشمگیری بهبود دهید. این اقدامات به کاهش حجم جاوااسکریپت، افزایش سرعت بارگذاری، و تجربه بهتر کاربر منجر میشوند.