যেকোনো স্কেলেবল প্রজেক্টে ফিচার ও ইউজার বেইজ বৃদ্ধির সাথে সাথে কোডবেসের জটিলতাও দ্রুত বাড়ে।

এটি সাধারণ মনে হলেও, একটি অপ্রয়োজনীয় মডিউল ইমপোর্ট পুরো অ্যাপের লোডিং গতি নষ্ট করে দিতে পারে।

বিশেষ করে ক্লায়েন্ট বান্ডেলে অতিরিক্ত ও অব্যবহৃত জাভাস্ক্রিপ্ট পুশ হলে ইউজারের ডিভাইসে পেজ লোড ও ইন্টারঅ্যাকশন স্লো হয়ে যায়, যা সরাসরি নেতিবাচক প্রভাব ফেলে কোর ওয়েব ভাইটালস (Core Web Vitals) এবং সার্চ ইঞ্জিন র‍্যাংকিংয়ে।

Next.js 16.1-এ প্রথম যুক্ত হয়েছিল Turbopack Bundle Analyzer, যার মাধ্যমে ডেভেলপাররা ভিজ্যুয়ালি বান্ডেল সাইজ বোঝার সুযোগ পান। তবে বড় বড় ডিপেন্ডেন্সি গ্রাফ ঘেঁটে প্রতিটি ভুল ইমপোর্ট ম্যানুয়ালি ট্র্যাক করা সবসময়ই কঠিন ও সময়সাপেক্ষ।

সেই সমস্যার বাস্তবসম্মত সমাধান এসেছে Next.js 16.4-এ। এখন আর ডিপেন্ডেন্সি সাইকেল বা ফলটি ইমপোর্ট ম্যানুয়ালি খুঁজতে হবে না; পুরো ইনভেস্টিগেশন ও অপটিমাইজেশন প্রক্রিয়া পরিচালনা করতে পারবেন Next.js with AI agent দিয়ে।

টার্বোপ্যাকের ডিপ মডিউল গ্রাফ বিশ্লেষণ করে কোথায় কোড লিক হচ্ছে তা শনাক্ত করা এবং সরাসরি কোড ফিক্স করার কাজ এখন স্বয়ংক্রিয়। Vercel তাদের নিজস্ব প্ল্যাটফর্ম এবং v0-তে এই এজেন্ট চালিয়ে প্রায় ২ মেগাবাইট কম্প্রেসড জাভাস্ক্রিপ্ট কমিয়ে এনেছে।

Bundle analysis, now for agents

Next.js-এ এখন সরাসরি একটি ডেডিকেটেড এজেন্ট স্কিল যুক্ত করা হয়েছে, যা আপনার অ্যাপের জাভাস্ক্রিপ্ট বান্ডেল নিজে থেকেই অপটিমাইজ করে দেয়।

যেহেতু এটি বিস্তারিত মডিউল গ্রাফ বিশ্লেষণ করে কাজ করে, তাই এর জন্য ডিফল্ট বান্ডলার হিসেবে Turbopack প্রয়োজন।

প্রথমে প্রোজেক্টটি Next.js 16.4-এ আপগ্রেড করে next-bundle-optimizer স্কিলটি যুক্ত করে নিন:

Bash

npx skills add vercel/next.js --skill next-bundle-optimizer

এরপর আপনার এআই এজেন্টে কমান্ড রান করুন:

Plaintext

/next-bundle-optimizer

The Pitfall of Dynamic Imports

ধরা যাক, একটি ভারী কম্পোনেন্ট দেরিতে লোড করানোর জন্য আপনি ডায়নামিক ইমপোর্ট ব্যবহার করেছেন:

JavaScript

// HeavyComponentLoader.js
'use client';
import { lazy } from 'react';

export const HeavyComponentLoader = lazy(() => import('./HeavyComponent'));

যদি শুধু HeavyComponentLoader-ই ./HeavyComponent-কে ইমপোর্ট করে, তবে কোডটি সফলভাবে ডিফার্ড বা অলস লোডিংয়ে থাকবে।

কিন্তু প্রজেক্টের অন্য যেকোনো ফাইলে যদি ভুলবশত ./HeavyComponent স্ট্যাটিকালি ইমপোর্ট হয়ে যায়, তবে পুরো কম্পোনেন্টটি শুরুর ইনিশিয়াল বান্ডেলেই লোড হয়ে যাবে।

ম্যানুয়ালি এই সূক্ষ্ম ত্রুটিগুলো ধরা কঠিন হলেও AI এজেন্টের জন্য এটি একদম সহজ।

স্কিলটি টার্বোপ্যাকের স্ন্যাপশট এক্সপোর্ট করে পুরো মডিউল ও চাঙ্ক গ্রাফ পুনর্গঠন করে। এরপর এটি গ্রাফের ‘মিনিমাম কাট’ (Minimum Cut) অ্যালগরিদম প্রয়োগ করে বের করে দেয় ঠিক কোন বাউন্ডারিতে পরিবর্তন আনলে ভারী কোডগুলো প্রাথমিক রেন্ডার পাথ থেকে আলাদা করা যাবে।

এছাড়া এজেন্ট যেসব কাজ নিখুঁতভাবে করতে পারে:

• ক্লায়েন্ট লজিক React Server Components (RSC)-এ শিফট করার সুযোগ চিহ্নিত করা।
• বড় লাইব্রেরির ডুপ্লিকেট ডিপেন্ডেন্সি শনাক্ত করা।
• ট্রি-শেকিং (Tree-shaking) ফেইল করে যেসব আনইউজড কোড ক্লায়েন্টে চলে যাচ্ছে, সেগুলো বাদ দেওয়া।

প্রস্তাবিত পরিবর্তনগুলো কোডে কার্যকর করতে কমান্ড দিন:

Plaintext

/next-bundle-optimizer fix

এটি কোড পরিবর্তন করবে, আগের ও পরের স্ন্যাপশট তুলনা করে কতটুকু সাইজ কমল তা জানাবে এবং সরাসরি একটি পুল রিকোয়েস্ট (Pull Request) ওপেন করার সুযোগ দেবে।

Putting the agent to work at Vercel

Vercel টিম তাদের প্রোডাকশন কোডবেস এবং v0-এর ফ্রন্টএন্ডে এই এজেন্ট স্কিল প্রয়োগ করে দারুণ ফলাফল পেয়েছে।

Key Findings in v0:

• একটি পরীক্ষামূলক কোড এডিটর ভুলবশত সব পেজে লোড হচ্ছিল (এমনকি যেসব ইউজার এক্সপেরিমেন্টের বাইরে ছিলেন তাদের জন্যও)। এটি ঠিক করে প্রায় ১৫০ KB সাইজ বাঁচানো গেছে।
• সেন্ট্রালাইজড ডায়ালগ রেজিস্ট্রির কারণে অপ্রয়োজনীয় ডায়ালগ কম্পোনেন্ট আগেই লোড হয়ে যাচ্ছিল। পেজভেদে সাইজ কমেছে ৪০ থেকে ৬৫০ KB পর্যন্ত।
• কোনো কাজে না লাগা একটি ট্রেস ভিউয়ার কম্পোনেন্ট বাদ দিয়ে কমেছে ৭ থেকে ৬১ KB।

Key Findings on Vercel.com:

• ড্যাশবোর্ডে Vercel Agent প্যানেল খোলার আগেই মার্কডাউন রেন্ডারিং, সিনট্যাক্স হাইলাইটিং এবং চার্টের লাইব্রেরি ইনিশিয়াল বান্ডেলে চলে যাচ্ছিল। এটি আটকে ২৫৫ KB সাইজ কমানো হয়েছে।
• ইউজার চ্যাট অ্যাসিস্ট্যান্টে লেখার আগেই লোড হচ্ছিল ভারী ডেট-পার্সিং লাইব্রেরি; এটি ডিফার করে সাশ্রয় হয়েছে ৫৫ KB।
• একটি সাধারণ ইউটিলিটি ফাইলের কারণে deployments পেজে ভুলবশত পুরো অবজার্যাবিলিটি কোয়েরি ইঞ্জিন লোড হচ্ছিল। সেটি আলাদা করে কমেছে ১২৫ KB।

সব মিলিয়ে ভেরসেল প্রায় ২ মেগাবাইট অপ্রয়োজনীয় জাভাস্ক্রিপ্ট প্রোডাকশন পেজগুলো থেকে সরিয়ে ফেলতে সক্ষম হয়েছে।

Bundle analysis for humans

এজেন্ট ছাড়াও নিজে কোড ইনস্পেক্ট করতে চাইলে ইন্টারঅ্যাক্টিভ ভিজ্যুয়াল অ্যানালাইজার ব্যবহার করা যায়। অ্যাপ ডিরেক্টরিতে কমান্ডটি চালান:

Bash

next analyze

Find your largest routes

হোমপেজে একটি রুট সামারি টেবিল দেখতে পাবেন, যেখানে কোন ক্লায়েন্ট রুটের সাইজ সবচেয়ে বড় তা ক্রমানুসারে সাজানো থাকে। সেখান থেকে নির্দিষ্ট রুটে ঢুকে কোন ডিপেন্ডেন্সি সবচেয়ে বেশি লোড নিচ্ছে, তা দ্রুত বের করা যায়।

Compare bundles as your app changes

প্রতিবার অ্যানালাইসিস রান করার পর স্বয়ংক্রিয়ভাবে স্ন্যাপশট সেভ হয়ে থাকে। কোড অপটিমাইজ করার আগে ও পরে বান্ডেল ঠিক কতটা কমল, তা টেবিল কিংবা ট্রিম্যাপ ভিউতে পরিষ্কারভাবে তুলনা করা যায়।

Source	Original	Optimize Rendering	Δ
components/code-block.tsx	22.0 kB	8.0 kB	−14.0 kB
components/search.tsx	18.0 kB	4.0 kB	−14.0 kB
node_modules/@example/parser.js	14.0 kB	6.0 kB	−8.0 kB
lib/table-of-contents.ts	9.0 kB	3.0 kB	−6.0 kB
components/related-posts.tsx	9.0 kB	5.0 kB	−4.0 kB
app/blog/layout.tsx	3.0 kB	7.0 kB	+4.0 kB
Total	123.0 kB	81.0 kB	−42.0 kB

Focus on the critical render path

অ্যানালাইজারের ট্রিম্যাপ ফিচারে এখন ডায়নামিক বা অ্যাসিনক্রোনাস ডিপেন্ডেন্সি ফিল্টার করে বাদ দেওয়া যায়। ফলে পেজের প্রথম রেন্ডারে ঠিক কোন কোন কোড ব্রাউজারে সিঙ্ক হয়ে যাচ্ছে, কেবল সেটুকু আলাদা করে দেখে অপ্রয়োজনীয় ব্লকিং কোড কমানো যায়।

Feedback and community

অ্যাপ্লিকেশনের লোডিং স্পিড বৃদ্ধি কেবল স্মুথ ইউজার এক্সপেরিয়েন্স দেয় না, একই সাথে বাউন্স রেট কমিয়ে সার্চ ইঞ্জিনে অর্গানিক গ্রোথ বজায় রাখতে সাহায্য করে।

ডায়নামিক ইমপোর্টের ভুল কনফিগারেশন, বড় লাইব্রেরির অব্যবহৃত কোড কিংবা ডুপ্লিকেট ডিপেন্ডেন্সি এই জটিল কাজগুলো যখন Next.js with AI agent স্বয়ংক্রিয়ভাবে সমাধান করতে পারে, তখন ডেভেলপার হিসেবে আপনার মূল্যবান সময় ব্যয় হতে পারে কোর প্রোডাক্ট ও ফিচার তৈরিতে।

আপনার Next.js অ্যাপের পারফরম্যান্স বাড়াতে আজই Next.js 16.4-এ আপগ্রেড করে next-bundle-optimizer স্কিলটি চালিয়ে দেখুন।

এই নতুন টুল নিয়ে কোনো মতামত বা সমস্যা থাকলে সরাসরি যুক্ত হতে পারেন Next.js GitHub Discussions, Issues অথবা অফিসিয়াল Discord কমিউনিটিতে।