چطور باندل اپ های Next.js رو بررسی کنیم؟

خیلی وقت های پیش میاد که اپ ما بی دلیل کند کار می کنه و با این که محتوای سنگینی هم لود نمی کنیم باز هم صفحات حجم بالایی دارند و حتی ممکنه اگر از این اتفاق آگاه نباشیم حجم یک اپ ساده hello world به بالای 2 مگابایت هم برسه و خیلی از توسعه دهنده ها اطلاعی از این مشکل ندارند.

بهترین راه پیدا کردن این مشکلات analyze کردن باندل پروژه هست.

اول این پکیج هارو نصب کنید

npm install --dev cross-env @next/bundle-analyzer

اگر فایل next.config.js ندارید توی root پروژه ایجادش کنید و این کد رو قرار بدید

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

module.exports = withBundleAnalyzer({})

بعد فایل Package.json رو باز کنید و کد زیر رو در قسمت scripts قرار بدید

&quotanalyze&quot: &quotcross-env ANALYZE=true next build&quot,
&quotanalyze:server&quot: &quotcross-env BUNDLE_ANALYZE=server next build&quot,
&quotanalyze:browser&quot: &quotcross-env BUNDLE_ANALYZE=browser next build&quot

حالا دستور

npm run analyze

رو اجرا کنید.

یک آنالیز اولیه انجام میشه و بعد 2 صفحه مرورگر براتون باز میشه. یکی باندل سرور هست و یکی هم باندل کلاینت. میتونید راحت بررسی کنید و ببینید چه لایبرری های اضافه ای سمت سرور یا کلاینت داره لود میشه.

برای مدیریت ماژول هایی که اضافه دارن لود میشن و مثلا نباید توی سرور باشن یا نباید توی کلاینت باشن مقاله زیر رو مطالعه کنید: https://vrgl.ir/d4cxw