تجزیه و تحلیل Bundle

@next/bundle-analyzer (opens in a new tab) یک پلاگین برای Next.js است که به شما در مدیریت اندازه ماژول‌های جاوااسکریپت کمک می‌کند. این پلاگین یک گزارش بصری از اندازه هر ماژول و وابستگی‌های آن‌ها تولید می‌کند. با استفاده از این اطلاعات، می‌توانید وابستگی‌های بزرگ را حذف کنید، کد را تفکیک کنید یا فقط در صورت نیاز برخی از قسمت‌ها را بارگیری کنید و در نتیجه میزان داده‌ای که به کاربر منتقل می‌شود را کاهش دهید.

نصب

پلاگین را با اجرای دستور زیر نصب کنید:

npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer

سپس، تنظیمات bundle آنالیزر را به فایل next.config.js خود اضافه کنید.

/** @type {import('next').NextConfig} */
const nextConfig = {}
 
const withBundleAnalyzer = require('@next/bundle-analyzer')()
 
module.exports =
	process.env.ANALYZE === 'true' ? withBundleAnalyzer(nextConfig) : nextConfig

آنالیز کردن باندل ها

برای تجزیه و تحلیل باندل های خود، دستور زیر را اجرا کنید:

ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build

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