কোড স্প্লিটিং এবং স্মার্ট লোডিং কৌশল ব্যবহার করে কীভাবে আপনার Next.js অ্যাপের গতি বাড়ানো যায়।
প্রকাশিত: ৮ নভেম্বর, ২০১৯
বিভিন্ন ধরণের কোড বিভাজন এবং আপনার Next.js অ্যাপের গতি বাড়ানোর জন্য ডায়নামিক ইম্পোর্ট কীভাবে ব্যবহার করবেন সে সম্পর্কে জানুন।
রুট-ভিত্তিক এবং উপাদান-ভিত্তিক কোড বিভাজন
ডিফল্টরূপে, Next.js আপনার জাভাস্ক্রিপ্টকে প্রতিটি রুটের জন্য আলাদা খণ্ডে বিভক্ত করে। ব্যবহারকারীরা যখন আপনার অ্যাপ্লিকেশন লোড করেন, তখন Next.js শুধুমাত্র প্রাথমিক রুটের জন্য প্রয়োজনীয় কোড পাঠায়। ব্যবহারকারীরা যখন অ্যাপ্লিকেশনের চারপাশে নেভিগেট করেন, তখন তারা অন্যান্য রুটের সাথে সম্পর্কিত খণ্ডগুলি নিয়ে আসেন। রুট-ভিত্তিক কোড বিভাজন স্ক্রিপ্টের পরিমাণ কমিয়ে দেয় যা একবারে পার্স এবং কম্পাইল করার প্রয়োজন হয়, যার ফলে পৃষ্ঠা লোডের সময় দ্রুত হয়।
যদিও রুট-ভিত্তিক কোড বিভাজন একটি ভালো ডিফল্ট পদ্ধতি, আপনি কম্পোনেন্ট স্তরে কোড বিভাজনের মাধ্যমে লোডিং প্রক্রিয়াটিকে আরও অপ্টিমাইজ করতে পারেন। যদি আপনার অ্যাপে বড় কম্পোনেন্ট থাকে, তাহলে সেগুলিকে আলাদা খণ্ডে বিভক্ত করা একটি দুর্দান্ত ধারণা। এইভাবে, যেকোনো বড় কম্পোনেন্ট যা গুরুত্বপূর্ণ নয় বা শুধুমাত্র নির্দিষ্ট ব্যবহারকারীর ইন্টারঅ্যাকশনে (যেমন একটি বোতামে ক্লিক করা) রেন্ডার করে তা অলসভাবে লোড করা যেতে পারে।
Next.js dynamic import() সমর্থন করে, যা আপনাকে জাভাস্ক্রিপ্ট মডিউল (React উপাদান সহ) গতিশীলভাবে আমদানি করতে এবং প্রতিটি আমদানিকে একটি পৃথক অংশ হিসাবে লোড করতে দেয়। এটি আপনাকে কম্পোনেন্ট-লেভেল কোড বিভাজন দেয় এবং আপনাকে রিসোর্স লোডিং নিয়ন্ত্রণ করতে সক্ষম করে যাতে ব্যবহারকারীরা কেবল সাইটের যে অংশটি দেখছেন তার জন্য প্রয়োজনীয় কোডটি ডাউনলোড করতে পারে। Next.js-এ, এই উপাদানগুলি ডিফল্টরূপে সার্ভার-সাইড রেন্ডার (SSR) হয়।
গতিশীল আমদানি কার্যকর
এই পোস্টে একটি নমুনা অ্যাপের বেশ কয়েকটি সংস্করণ রয়েছে যার মধ্যে একটি বোতাম সহ একটি সাধারণ পৃষ্ঠা রয়েছে। আপনি যখন বোতামটি ক্লিক করেন, তখন আপনি একটি সুন্দর কুকুরছানা দেখতে পাবেন। অ্যাপের প্রতিটি সংস্করণের মধ্য দিয়ে যাওয়ার সময়, আপনি দেখতে পাবেন যে গতিশীল আমদানিগুলি স্ট্যাটিক আমদানি থেকে কীভাবে আলাদা এবং কীভাবে সেগুলি দিয়ে কাজ করতে হয়।
অ্যাপের প্রথম সংস্করণে, কুকুরছানাটি components/Puppy.js তে থাকে। পৃষ্ঠায় কুকুরছানাটি প্রদর্শনের জন্য, অ্যাপটি একটি স্ট্যাটিক ইম্পোর্ট স্টেটমেন্ট সহ index.js তে Puppy উপাদানটি আমদানি করে:
import Puppy from "../components/Puppy";
Next.js অ্যাপটি কীভাবে বান্ডিল করে তা দেখতে, DevTools-এ নেটওয়ার্ক ট্রেস পরীক্ষা করুন:
সাইটের প্রিভিউ দেখতে, View App টিপুন। তারপর Fullscreen টিপুন
.DevTools খুলতে `Control+Shift+J` (অথবা Mac-এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
ক্যাশে নিষ্ক্রিয় করুন চেকবক্সটি নির্বাচন করুন।
পৃষ্ঠাটি পুনরায় লোড করুন।
যখন আপনি পৃষ্ঠাটি লোড করেন, তখন Puppy.js উপাদান সহ সমস্ত প্রয়োজনীয় কোড index.js এ একত্রিত হয়:
যখন আপনি "Click me" বোতামটি টিপবেন, তখন শুধুমাত্র "puppy JPEG" এর অনুরোধটি নেটওয়ার্ক ট্যাবে যোগ করা হবে:
এই পদ্ধতির নেতিবাচক দিক হল, ব্যবহারকারীরা যদি কুকুরছানাটি দেখতে বোতামে ক্লিক নাও করে, তবুও তাদের Puppy উপাদানটি লোড করতে হবে কারণ এটি index.js এ অন্তর্ভুক্ত। এই ছোট্ট উদাহরণে এটি কোনও বড় বিষয় নয়, তবে বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলিতে কেবল প্রয়োজনের সময় বড় উপাদানগুলি লোড করা প্রায়শই একটি বিশাল উন্নতি।
এখন অ্যাপটির দ্বিতীয় সংস্করণটি দেখুন, যেখানে স্ট্যাটিক ইম্পোর্টকে একটি ডাইনামিক ইম্পোর্ট দিয়ে প্রতিস্থাপন করা হয়েছে। Next.js-এ next/dynamic অন্তর্ভুক্ত রয়েছে, যা Next-এর যেকোনো উপাদানের জন্য ডাইনামিক ইম্পোর্ট ব্যবহার করা সম্ভব করে তোলে:
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-এ ধীর নেটওয়ার্ক সংযোগ সিমুলেট করুন:
সাইটের প্রিভিউ দেখতে, View App টিপুন। তারপর Fullscreen টিপুন
.DevTools খুলতে `Control+Shift+J` (অথবা Mac-এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
ক্যাশে নিষ্ক্রিয় করুন চেকবক্সটি নির্বাচন করুন।
থ্রটলিং ড্রপ-ডাউন তালিকায়, ফাস্ট 3G নির্বাচন করুন।
"আমাকে ক্লিক করুন " বোতামটি টিপুন।
এখন যখন আপনি বোতামটি ক্লিক করবেন তখন কম্পোনেন্টটি লোড হতে কিছুটা সময় লাগবে এবং অ্যাপটি "লোড হচ্ছে..." বার্তাটি প্রদর্শন করবে।
SSR ছাড়া গতিশীল আমদানি
যদি আপনার কেবল ক্লায়েন্ট সাইডে (যেমন, একটি চ্যাট উইজেট) কোনও উপাদান রেন্ডার করার প্রয়োজন হয়, তাহলে আপনি ssr বিকল্পটি false এ সেট করে এটি করতে পারেন:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
উপসংহার
গতিশীল আমদানির জন্য সমর্থন সহ, Next.js আপনাকে কম্পোনেন্ট-লেভেল কোড স্প্লিটিং দেয়, যা আপনার জাভাস্ক্রিপ্ট পেলোড কমাতে পারে এবং অ্যাপ্লিকেশন লোড সময় উন্নত করতে পারে। সমস্ত কম্পোনেন্ট ডিফল্টরূপে সার্ভার-সাইড রেন্ডার করা হয় এবং যখনই প্রয়োজন হয় আপনি এই বিকল্পটি অক্ষম করতে পারেন।