কোড স্প্লিটিং এবং স্মার্ট লোডিং কৌশল সহ আপনার Next.js অ্যাপের গতি বাড়ানোর উপায়।
আপনি কি শিখবেন?
এই পোস্টটি বিভিন্ন ধরনের কোড বিভাজন এবং কিভাবে আপনার Next.js অ্যাপের গতি বাড়ানোর জন্য গতিশীল আমদানি ব্যবহার করতে হয় তা ব্যাখ্যা করে।
রুট-ভিত্তিক এবং উপাদান-ভিত্তিক কোড বিভাজন
ডিফল্টরূপে, Next.js আপনার জাভাস্ক্রিপ্টকে প্রতিটি রুটের জন্য পৃথক খণ্ডে বিভক্ত করে। যখন ব্যবহারকারীরা আপনার অ্যাপ্লিকেশন লোড করে, Next.js শুধুমাত্র প্রাথমিক রুটের জন্য প্রয়োজনীয় কোড পাঠায়। যখন ব্যবহারকারীরা অ্যাপ্লিকেশনটির চারপাশে নেভিগেট করেন, তখন তারা অন্যান্য রুটের সাথে যুক্ত অংশগুলি নিয়ে আসে। রুট-ভিত্তিক কোড বিভাজন স্ক্রিপ্টের পরিমাণ কমিয়ে দেয় যা একবারে পার্স এবং কম্পাইল করা প্রয়োজন, যার ফলে দ্রুত পৃষ্ঠা লোড হয়।
যদিও রুট-ভিত্তিক কোড স্প্লিটিং একটি ভাল ডিফল্ট, আপনি কম্পোনেন্ট লেভেলে কোড স্প্লিটিং সহ লোডিং প্রক্রিয়াটিকে আরও অপ্টিমাইজ করতে পারেন। যদি আপনার অ্যাপে বড় উপাদান থাকে, তাহলে সেগুলিকে আলাদা খণ্ডে বিভক্ত করা একটি দুর্দান্ত ধারণা। এইভাবে, যে কোনও বড় উপাদান যা সমালোচনামূলক নয় বা শুধুমাত্র নির্দিষ্ট ব্যবহারকারীর ইন্টারঅ্যাকশনে রেন্ডার করে (যেমন একটি বোতামে ক্লিক করা) অলস-লোড হতে পারে।
Next.js গতিশীল import() সমর্থন করে, যা আপনাকে জাভাস্ক্রিপ্ট মডিউলগুলি (প্রতিক্রিয়া উপাদান সহ) গতিশীলভাবে আমদানি করতে এবং প্রতিটি আমদানিকে একটি পৃথক অংশ হিসাবে লোড করতে দেয়। এটি আপনাকে কম্পোনেন্ট-লেভেল কোড স্প্লিটিং দেয় এবং আপনাকে রিসোর্স লোডিং নিয়ন্ত্রণ করতে সক্ষম করে যাতে ব্যবহারকারীরা শুধুমাত্র সাইটের যে অংশটি দেখছেন তার জন্য তাদের প্রয়োজনীয় কোডটি ডাউনলোড করে। Next.js-এ, এই উপাদানগুলি ডিফল্টরূপে সার্ভার-সাইড রেন্ডারড (SSR) ।
কর্মে গতিশীল আমদানি
এই পোস্টে একটি নমুনা অ্যাপের বিভিন্ন সংস্করণ রয়েছে যা একটি বোতাম সহ একটি সাধারণ পৃষ্ঠা নিয়ে গঠিত। আপনি বোতামে ক্লিক করলে, আপনি একটি চতুর কুকুরছানা দেখতে পাবেন। আপনি অ্যাপের প্রতিটি সংস্করণের মধ্য দিয়ে যাওয়ার সাথে সাথে আপনি দেখতে পাবেন কিভাবে গতিশীল আমদানি স্ট্যাটিক আমদানি থেকে আলাদা এবং কীভাবে তাদের সাথে কাজ করা যায়।
অ্যাপটির প্রথম সংস্করণে, কুকুরছানাটি components/Puppy.js এ বাস করে। পৃষ্ঠায় কুকুরছানা প্রদর্শন করতে, অ্যাপটি একটি স্ট্যাটিক আমদানি বিবৃতি সহ index.js এ Puppy উপাদান আমদানি করে:
import Puppy from "../components/Puppy";
Next.js অ্যাপটিকে কীভাবে বান্ডিল করে তা দেখতে, DevTools-এ নেটওয়ার্ক ট্রেস পরিদর্শন করুন:
সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
.DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
অক্ষম ক্যাশে চেকবক্স নির্বাচন করুন।
পৃষ্ঠাটি পুনরায় লোড করুন।
আপনি যখন পৃষ্ঠাটি লোড করেন, তখন Puppy.js উপাদান সহ সমস্ত প্রয়োজনীয় কোড index.js এ বান্ডিল করা হয় :
আপনি যখন আমাকে ক্লিক করুন বোতাম টিপুন, শুধুমাত্র কুকুরছানা JPEG-এর জন্য অনুরোধ নেটওয়ার্ক ট্যাবে যোগ করা হয়:
এই পদ্ধতির নেতিবাচক দিক হল যে ব্যবহারকারীরা কুকুরছানা দেখতে বোতামে ক্লিক না করলেও, তাদের Puppy উপাদানটি লোড করতে হবে কারণ এটি index.js এ অন্তর্ভুক্ত রয়েছে। এই ছোট উদাহরণে এটি একটি বড় বিষয় নয়, তবে বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলিতে এটি প্রায়শই প্রয়োজনের সময় বড় উপাদানগুলি লোড করার জন্য একটি বিশাল উন্নতি।
এখন অ্যাপটির একটি দ্বিতীয় সংস্করণ দেখুন, যেখানে স্ট্যাটিক আমদানি একটি গতিশীল আমদানির সাথে প্রতিস্থাপিত হয়েছে। Next.js-এ next/dynamic অন্তর্ভুক্ত রয়েছে, যা পরবর্তীতে যেকোনো উপাদানের জন্য গতিশীল আমদানি ব্যবহার করা সম্ভব করে তোলে:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
নেটওয়ার্ক ট্রেস পরিদর্শন করতে প্রথম উদাহরণ থেকে পদক্ষেপগুলি অনুসরণ করুন৷
আপনি যখন প্রথম অ্যাপটি লোড করেন, শুধুমাত্র index.js ডাউনলোড হয়। এইবার এটি 0.5 KB ছোট (এটি 37.9 KB থেকে 37.4 KB এ নেমে গেছে) কারণ এতে Puppy উপাদানের কোড অন্তর্ভুক্ত নেই:
Puppy উপাদানটি এখন একটি পৃথক খণ্ডে রয়েছে, 1.js , যা আপনি বোতাম টিপলেই লোড হয়:
বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলিতে, উপাদানগুলি প্রায়শই অনেক বড় হয় এবং সেগুলিকে অলসভাবে লোড করা আপনার প্রাথমিক জাভাস্ক্রিপ্ট পেলোডকে শত শত কিলোবাইট দ্বারা ছাঁটাই করতে পারে৷
কাস্টম লোডিং সূচক সহ গতিশীল আমদানি
আপনি যখন অলস-লোড রিসোর্স করেন, কোন বিলম্বের ক্ষেত্রে লোডিং ইন্ডিকেটর প্রদান করা ভালো অভ্যাস। Next.js-এ, আপনি dynamic() ফাংশনে একটি অতিরিক্ত আর্গুমেন্ট প্রদান করে তা করতে পারেন:
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
লোডিং ইনডিক্টরটি কার্যকর দেখতে, DevTools-এ ধীর নেটওয়ার্ক সংযোগ অনুকরণ করুন:
সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
.DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
অক্ষম ক্যাশে চেকবক্স নির্বাচন করুন।
থ্রটলিং ড্রপ-ডাউন তালিকায়, দ্রুত 3G নির্বাচন করুন।
ক্লিক মি বোতাম টিপুন।
এখন আপনি যখন বোতামটি ক্লিক করেন তখন উপাদানটি লোড হতে কিছু সময় লাগে এবং অ্যাপটি এর মধ্যে "লোড হচ্ছে..." বার্তাটি প্রদর্শন করে।
SSR ছাড়া গতিশীল আমদানি
আপনি যদি শুধুমাত্র ক্লায়েন্ট সাইডে একটি উপাদান রেন্ডার করতে চান (উদাহরণস্বরূপ, একটি চ্যাট উইজেট) আপনি ssr বিকল্পটিকে false সেট করে তা করতে পারেন:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
উপসংহার
গতিশীল আমদানির জন্য সমর্থন সহ, Next.js আপনাকে কম্পোনেন্ট-লেভেল কোড স্প্লিটিং দেয়, যা আপনার জাভাস্ক্রিপ্ট পেলোড কমিয়ে দিতে পারে এবং অ্যাপ্লিকেশন লোডের সময় উন্নত করতে পারে। সমস্ত উপাদান ডিফল্টরূপে সার্ভার-সাইড রেন্ডার করা হয় এবং আপনি যখনই প্রয়োজন তখন এই বিকল্পটি নিষ্ক্রিয় করতে পারেন।