অব্যবহৃত কোড সরান

npm আপনার প্রজেক্টে কোড যোগ করাকে একটি হাওয়া দেয়। কিন্তু আপনি কি সত্যিই সেই সব অতিরিক্ত বাইট ব্যবহার করছেন?

Houssein Djirdeh

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

কোর ওয়েব ভাইটালসের উপর প্রভাব

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

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

এই নির্দেশিকা আপনাকে আপনার প্রোজেক্টের কোডবেস কিভাবে বিশ্লেষণ করতে হয় তা দেখিয়ে আপনার প্রোজেক্টের অব্যবহৃত কোডে একটি হ্যান্ডেল পেতে সাহায্য করবে এবং জাভাস্ক্রিপ্ট সম্পদ থেকে অব্যবহৃত কোড ছাঁটাই করার কৌশল অফার করবে যা আপনি উৎপাদনে আপনার ব্যবহারকারীদের কাছে পাঠান।

আপনার বান্ডিল বিশ্লেষণ

DevTools সমস্ত নেটওয়ার্ক অনুরোধের আকার দেখতে সহজ করে তোলে:

1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
2. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
3. অক্ষম ক্যাশে চেকবক্স নির্বাচন করুন।
4. পৃষ্ঠাটি পুনরায় লোড করুন।

DevTools-এর কভারেজ ট্যাবটি আপনাকে বলবে যে আপনার অ্যাপ্লিকেশনে কতটা CSS এবং JS কোড অব্যবহৃত আছে।

এর নোড CLI এর মাধ্যমে একটি সম্পূর্ণ লাইটহাউস কনফিগারেশন নির্দিষ্ট করে, একটি "অব্যবহৃত জাভাস্ক্রিপ্ট" অডিট আপনার অ্যাপ্লিকেশনের সাথে কতটা অব্যবহৃত কোড পাঠানো হচ্ছে তা ট্রেস করতে ব্যবহার করা যেতে পারে।

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

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

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

অন্তর্ভুক্ত এই প্লাগইনের সাথে অ্যাপ্লিকেশনটি পুনরায় লোড করা আপনার সম্পূর্ণ বান্ডিলের একটি জুমযোগ্য ট্রিম্যাপ দেখায়।

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

অব্যবহৃত লাইব্রেরি সরান

পূর্ববর্তী ট্রিম্যাপ ছবিতে, একটি একক @firebase ডোমেনের মধ্যে বেশ কয়েকটি প্যাকেজ রয়েছে। যদি আপনার ওয়েবসাইটের শুধুমাত্র ফায়ারবেস ডাটাবেস উপাদানের প্রয়োজন হয়, তাহলে সেই লাইব্রেরিটি আনতে আমদানি আপডেট করুন:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

এটি জোর দেওয়া গুরুত্বপূর্ণ যে এই প্রক্রিয়াটি বৃহত্তর অ্যাপ্লিকেশনগুলির জন্য উল্লেখযোগ্যভাবে আরও জটিল।

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

এবং যদি আপনি ওয়েবপ্যাক ব্যবহার করছেন, তাহলে জনপ্রিয় লাইব্রেরি থেকে স্বয়ংক্রিয়ভাবে অব্যবহৃত কোড মুছে ফেলা প্লাগইনগুলির তালিকাটি দেখুন৷

অপ্রয়োজনীয় লাইব্রেরি সরান

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