ওয়েবপ্যাকের সাথে পারফরম্যান্স বাজেট সেট করা

Milica Mihajlija

এই কোডল্যাবটি অনুসরণ করতে, একটি দ্বিতীয় ট্যাবে এই সমস্যাটি খুলুন।

ওয়েবপ্যাক আপনার সমস্ত আমদানি করা ফাইলকে একত্রিত করে এবং সেগুলিকে বান্ডেল নামে পরিচিত এক বা একাধিক আউটপুট ফাইলে প্যাকেজ করে। বান্ডলিং ঝরঝরে, কিন্তু আপনার অ্যাপ বাড়ার সাথে সাথে আপনার বান্ডিলও বাড়বে। আপনাকে বান্ডিলের আকারগুলি নিরীক্ষণ করতে হবে যাতে সেগুলি খুব বড় না হয় এবং আপনার অ্যাপ্লিকেশনটি লোড হতে কতক্ষণ সময় নেয় তা প্রভাবিত করে। ওয়েবপ্যাক সম্পদের আকারের উপর ভিত্তি করে পারফরম্যান্স বাজেট সেট করা সমর্থন করে এবং এটি আপনার জন্য বান্ডিলের আকারের উপর নজর রাখতে পারে।

এটিকে কার্যকরভাবে দেখতে, এখানে একটি অ্যাপ রয়েছে যা নতুন বছর পর্যন্ত বাকি দিনগুলি গণনা করে৷ এটি React এবং moment.js দিয়ে তৈরি। (ঠিক বাস্তব-বিশ্বের অ্যাপের মতো যা ক্রমবর্ধমানভাবে ফ্রেমওয়ার্ক এবং লাইব্রেরির উপর নির্ভর করে। 😉)

পরিমাপ করা

এই কোডল্যাবে ইতিমধ্যেই ওয়েবপ্যাকের সাথে বান্ডিল করা অ্যাপ রয়েছে৷

1. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
2. টার্মিনাল ক্লিক করুন (দ্রষ্টব্য: যদি টার্মিনাল বোতামটি না দেখায় তাহলে আপনাকে ফুলস্ক্রিন বিকল্প ব্যবহার করতে হতে পারে)।
3. সম্পদ এবং তাদের আকারের একটি রঙ-কোডেড তালিকা পেতে, কনসোলে webpack টাইপ করুন।

webpack

প্রধান বান্ডিলটি হলুদ রঙে হাইলাইট করা হয়েছে কারণ এটি 244 KiB (250 KB) এর চেয়ে বড়।

দ্রষ্টব্য: ওয়েবপ্যাক ইউনিট "KiB" ব্যবহার করে, যা আপনি আগে দেখেননি। 1 "KiB" এবং 1 "KB" আকারে মোটামুটি কাছাকাছি: 1 KiB হল 1024 বাইট, যখন 1 KB হল 1000 বাইট৷

ওয়েবপ্যাক আপনাকে ভারী JS বান্ডেল ⚠️ সম্পর্কে সতর্ক করছে

এই সতর্কতাগুলি উত্পাদন মোডে ডিফল্টরূপে সক্ষম করা হয় এবং ডিফল্ট থ্রেশহোল্ড 244 KiB আনকম্প্রেসড , উভয় সম্পদ এবং এন্ট্রি পয়েন্টের জন্য (একটি পৃষ্ঠার প্রাথমিক লোডের সময় ব্যবহৃত সমস্ত সম্পদের সংমিশ্রণ)।

ওয়েবপ্যাক আপনাকে ভারী JS বান্ডেল ⚠️ সম্পর্কে সতর্ক করছে

ওয়েবপ্যাক শুধুমাত্র আপনাকে সতর্ক করবে না, তবে এটি আপনাকে কীভাবে আপনার বান্ডিলের আকার কমাতে হবে সে সম্পর্কে একটি সুপারিশও দেবে। আপনি ওয়েব ফান্ডামেন্টালগুলিতে প্রস্তাবিত কৌশলগুলি সম্পর্কে আরও জানতে পারেন৷

ওয়েবপ্যাক কর্মক্ষমতা অপ্টিমাইজেশান সুপারিশ 💁

একটি কাস্টম কর্মক্ষমতা বাজেট সেট করুন

একটি উপযুক্ত কর্মক্ষমতা বাজেট আপনার প্রকল্পের প্রকৃতির উপর নির্ভর করবে। আপনার নিজের গবেষণা করা সর্বদা ভাল। একটি ভাল নিয়ম হল 170 KB কমপ্রেসড/মিনিফাইড ক্রিটিক্যাল-পাথ রিসোর্স সরবরাহ করা।

দ্রষ্টব্য: ক্রিটিকাল-পাথ রিসোর্স হল প্রথম স্ক্রীনের কন্টেন্ট প্রদর্শনের জন্য ব্রাউজারের জন্য প্রয়োজনীয় রিসোর্সের ন্যূনতম সেট।

এই সাধারণ ডেমোর জন্য, আরও বেশি রক্ষণশীল হওয়ার চেষ্টা করুন এবং বাজেট 100 KB (97.7 KiB) সেট করুন। webpack.config.js এ, নিম্নলিখিত যোগ করুন:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

নতুন কর্মক্ষমতা বাজেট বাইটে সেট করা হয়েছে:

• স্বতন্ত্র সম্পদের জন্য 100000 বাইট (maxAssetSize)
• এন্ট্রি-পয়েন্টের জন্য 100000 বাইট (maxEntrypointSize)

এই ক্ষেত্রে, শুধুমাত্র একটি বান্ডিল আছে যা এন্ট্রি পয়েন্ট হিসাবে কাজ করে।

ইঙ্গিতগুলির জন্য সম্ভাব্য মানগুলি হল:

1. warning (ডিফল্ট): একটি হলুদ সতর্কতা বার্তা প্রদর্শন করে, কিন্তু বিল্ড পাস হয়। উন্নয়ন পরিবেশে এটি ব্যবহার করা ভাল।
2. error : একটি লাল ত্রুটি বার্তা প্রদর্শন করে, কিন্তু বিল্ড এখনও পাস হয়। এই সেটিং উত্পাদন বিল্ড জন্য সুপারিশ করা হয়.
3. false : কোন সতর্কতা বা ত্রুটি দেখানো হয় না।

ওয়েবপ্যাক কর্মক্ষমতা ইঙ্গিত "ত্রুটি" 🚨

অপ্টিমাইজ করুন

পারফরম্যান্স বাজেটের উদ্দেশ্য হল পারফরম্যান্স সংক্রান্ত সমস্যাগুলি সমাধান করা খুব কঠিন হওয়ার আগে আপনাকে সতর্ক করা। একটি অ্যাপ তৈরি করার জন্য সর্বদা একাধিক উপায় রয়েছে এবং কিছু কৌশল দ্রুত লোডের সময় তৈরি করবে। ( আপনার জাভাস্ক্রিপ্ট অপ্টিমাইজ করার জন্য তাদের অনেকগুলি এখানে নথিভুক্ত করা হয়েছে। 🤓)

ফ্রেমওয়ার্ক এবং লাইব্রেরিগুলি ডেভেলপারদের জীবনকে সহজ করে তোলে, কিন্তু শেষ ব্যবহারকারীরা আসলেই অ্যাপগুলি কীভাবে তৈরি করা হয় তা নিয়ে চিন্তা করেন না, শুধুমাত্র তারা কার্যকরী এবং দ্রুত। আপনি যদি নিজেকে পারফরম্যান্সের বাজেট অতিক্রম করতে দেখেন, তাহলে সম্ভাব্য অপ্টিমাইজেশন সম্পর্কে চিন্তা করার সময় এসেছে।

বাস্তব জগতে, বড় ক্লায়েন্ট-সাইড ফ্রেমওয়ার্কগুলি সাধারণত অদলবদল করা কঠিন, তাই সেগুলিকে বুদ্ধিমানের সাথে ব্যবহার করা গুরুত্বপূর্ণ। একটু গবেষণা করে, আপনি প্রায়শই জনপ্রিয় লাইব্রেরিগুলির জন্য ছোট বিকল্পগুলি খুঁজে পেতে পারেন যা ঠিক একইভাবে কাজ করে ( date-fns হল moment.js এর জন্য একটি ভাল বিকল্প)। কখনও কখনও এটি একটি গুরুত্বপূর্ণ কর্মক্ষমতা প্রভাব থাকলে একটি কাঠামো বা লাইব্রেরি ব্যবহার না করা আরও বোধগম্য হয়।

অব্যবহৃত কোড অপসারণ করা বড় তৃতীয় পক্ষের লাইব্রেরি অন্তর্ভুক্ত অ্যাপগুলিকে অপ্টিমাইজ করার একটি ভাল উপায়৷ অব্যবহৃত কোড সরান নির্দেশিকা এই প্রক্রিয়াটি বিস্তারিতভাবে ব্যাখ্যা করে এবং এখানে moment.js ব্যবহার না করেই কাউন্টডাউন কোডটি পুনরায় লেখার একটি দ্রুত উপায় রয়েছে৷

app/components/Countdown.jsx- এ সরান:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

এবং এই লাইনটি মুছুন:

const moment = require('moment');

এটিতে কিছুটা গণিত লাগে, তবে আপনি ভ্যানিলা জাভাস্ক্রিপ্টের সাথে একই কাউন্টডাউন বাস্তবায়ন করতে পারেন:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

এখন package.json থেকে moment.js সরান এবং অপ্টিমাইজড বান্ডেল তৈরি করতে আবার কনসোলে ওয়েবপ্যাক চালান।

তা-দা! আপনি 223 KiB (230KB) শেভ করেছেন এবং অ্যাপটি বাজেটের অধীনে রয়েছে।🎉

মনিটর

ওয়েবপ্যাকে একটি পারফরম্যান্স বাজেট সেট আপ করতে কোডের মাত্র কয়েকটি লাইন লাগে এবং আপনি যদি কখনও (দুর্ঘটনাক্রমে) একটি বড় নির্ভরতা যুক্ত করেন তবে এটি আপনাকে সতর্ক করবে। উক্তিটি "দৃষ্টির বাইরে, মনের বাইরে" কিন্তু ওয়েবপ্যাক নিশ্চিত করতে পারে যে আপনি সর্বদা কর্মক্ষমতার প্রভাব সম্পর্কে সচেতন।