Minified CSS এবং Unused CSS Remove করা

ওয়েব ডেভেলপমেন্টে পারফরম্যান্স উন্নত করতে Minified CSS এবং Unused CSS কে অপ্টিমাইজ করা খুবই গুরুত্বপূর্ণ। Bulma ফ্রেমওয়ার্ক ব্যবহার করার সময় এই দুটি কার্যকলাপের মাধ্যমে আপনি আপনার ওয়েবসাইটের লোড টাইম কমাতে পারেন এবং সাইটের রেসপন্সিভনেস বাড়াতে পারেন। এখানে আমরা দেখব কীভাবে Bulma CSS ফ্রেমওয়ার্কের Minified CSS ব্যবহার করতে হয় এবং Unused CSS অপসারণ করা যায়।

১. Minified CSS ব্যবহার

Minified CSS মানে হলো কম্প্রেস করা বা সংকুচিত CSS ফাইল, যেখানে সব অপ্রয়োজনীয় স্পেস, লাইনের ব্রেক এবং কমেন্ট মুছে ফেলা হয়, ফলে ফাইলের সাইজ অনেক ছোট হয়ে যায়। এটি ওয়েবসাইটের লোডিং স্পিড বাড়াতে সহায়ক।

Minified CSS কেন ব্যবহার করবেন?

• ওয়েব পেজের লোড টাইম কমিয়ে দেয়।
• সার্ভারের ব্যান্ডউইথ সংরক্ষণ করতে সহায়তা করে।
• ছোট সাইজের CSS ফাইলের মাধ্যমে পেজের পারফরম্যান্স উন্নত হয়।

Bulma Minified CSS ডাউনলোড:

Bulma এর minified সংস্করণ ব্যবহার করতে, আপনি সহজেই CDN (Content Delivery Network) বা ডাউনলোড করে ব্যবহার করতে পারেন।

CDN থেকে Minified CSS লিঙ্ক:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

এখানে bulma.min.css হচ্ছে Bulma এর মিনিফাইড (কম্প্রেসড) সংস্করণ। আপনি এই লিঙ্কটি ব্যবহার করে সরাসরি আপনার প্রোজেক্টে যুক্ত করতে পারেন।

Minified CSS ডাউনলোড করে ব্যবহার:

Bulma এর অফিসিয়াল ওয়েবসাইট বা GitHub থেকে আপনি মিনিফাইড CSS ফাইল ডাউনলোড করতে পারেন:

• Bulma CSS GitHub Repository
• Bulma CSS Official Website

২. Unused CSS Remove করা

Unused CSS (অপ্রয়োজনীয় CSS) হল সেই CSS স্টাইল যা আপনার ওয়েবসাইটে ব্যবহৃত হচ্ছে না, তবে CSS ফাইলে অন্তর্ভুক্ত রয়েছে। এটি সাইটের লোড টাইম বৃদ্ধি করতে পারে এবং পারফরম্যান্স হ্রাস করতে পারে। তাই এই অপ্রয়োজনীয় CSS কোড সরানো উচিত।

Unused CSS কেন অপসারণ করবেন?

• CSS ফাইলের সাইজ ছোট হয়, ফলে ওয়েবসাইট দ্রুত লোড হয়।
• ব্যান্ডউইথ সাশ্রয় হয়, বিশেষত মোবাইল ডেটার জন্য।
• ওয়েবসাইটের পারফরম্যান্স বৃদ্ধি পায়।

Unused CSS অপসারণের উপায়:

১. PurifyCSS বা PurgeCSS ব্যবহার করা

PurgeCSS এবং PurifyCSS হল জনপ্রিয় টুলস যা আপনার প্রোজেক্ট থেকে অপ্রয়োজনীয় CSS কোড সরিয়ে ফেলে। এগুলি JavaScript, HTML এবং CSS ফাইল গুলো পর্যালোচনা করে যে CSS কোড ব্যবহার হচ্ছে না, তা সরিয়ে ফেলে। PurgeCSS বিশেষভাবে সিঙ্গেল পেইজ অ্যাপ্লিকেশন (SPA) এর জন্য খুবই কার্যকর।

PurgeCSS ব্যবহার:

1. প্রথমে, আপনি PurgeCSS ইনস্টল করুন:

npm install purgecss --save-dev

2. এরপর, আপনার বিল্ড স্ক্রিপ্টে PurgeCSS যুক্ত করুন:

{
  "scripts": {
    "build": "purgecss --css src/css/*.css --content src/*.html src/*.js --output dist/css/"
  }
}

এভাবে PurgeCSS আপনার CSS ফাইল থেকে অপ্রয়োজনীয় স্টাইলগুলো সরিয়ে দেবে এবং ছোট CSS ফাইল তৈরি করবে।

২. UnCSS ব্যবহার করা

UnCSS আরেকটি জনপ্রিয় টুল যা আপনার প্রোজেক্ট থেকে অপ্রয়োজনীয় CSS কোড সরিয়ে দেয়। এটি আপনার HTML এবং JavaScript ফাইল স্ক্যান করে এবং যেসব CSS ক্লাস ব্যবহার হচ্ছে না তা সরিয়ে দেয়।

UnCSS ব্যবহার:

1. প্রথমে UnCSS ইনস্টল করুন:

npm install uncss --save-dev

2. আপনার বিল্ড স্ক্রিপ্টে UnCSS ব্যবহার করুন:

{
  "scripts": {
    "build": "uncss index.html > dist/css/style.css"
  }
}

এটি আপনার CSS ফাইল থেকে অপ্রয়োজনীয় কোড সরিয়ে একটি ছোট এবং অপ্টিমাইজড CSS ফাইল তৈরি করবে।

৩. Webpack ও CSS Nano ব্যবহার করা

যদি আপনি Webpack ব্যবহার করেন, তবে CSS Nano ব্যবহার করে আপনার CSS ফাইল মিনিফাই এবং অপ্টিমাইজ করা সম্ভব।

1. প্রথমে CSS Nano এবং PostCSS ইনস্টল করুন:

npm install cssnano postcss --save-dev

2. তারপর Webpack কনফিগারেশনে CSS Nano যুক্ত করুন:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new CssMinimizerPlugin()
  ]
};

এভাবে Webpack এবং CSS Nano ব্যবহার করে CSS মিনিফাই করা সম্ভব হবে।

৩. Bulma এর জন্য Custom Build তৈরি করা

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

1. প্রথমে Bulma এর Sass সংস্করণ ইনস্টল করুন:

npm install bulma

2. তারপর আপনার Sass ফাইলে আপনি যে মডিউলগুলো প্রয়োজন, তা কেবলমাত্র @import করুন:

@import 'node_modules/bulma/sass/utilities/_all';
@import 'node_modules/bulma/sass/base/_all';
@import 'node_modules/bulma/sass/components/_all';

এভাবে আপনি কেবল প্রয়োজনীয় মডিউলগুলোই সিএসএস ফাইলে অন্তর্ভুক্ত করতে পারবেন।

সারাংশ

Bulma ফ্রেমওয়ার্ক ব্যবহার করার সময় Minified CSS এবং Unused CSS Removal দুটি প্রক্রিয়া ওয়েবসাইটের পারফরম্যান্স বাড়ানোর জন্য খুবই কার্যকর। Minified CSS ব্যবহার করে CSS ফাইলের সাইজ কমানো যায়, যা লোড টাইম হ্রাস করে এবং সার্ভার ব্যান্ডউইথ সংরক্ষণ করে। অন্যদিকে, Unused CSS Removal এর মাধ্যমে অপ্রয়োজনীয় CSS কোড সরিয়ে ফেললে CSS ফাইলের সাইজ ছোট হয় এবং ওয়েবসাইট দ্রুত লোড হয়। PurgeCSS, UnCSS, CSS Nano এবং Webpack এর মাধ্যমে আপনি সহজেই এই অপ্টিমাইজেশন করতে পারেন।