CSS মিনিফায়ার

CSS মিনিফিকেশন কী?

CSS মিনিফিকেশন হলো একটি স্টাইলশিটের আচরণ পরিবর্তন না করে সমস্ত অপ্রয়োজনীয় বর্ণ সরিয়ে ফেলার প্রক্রিয়া। এর অর্থ হলো হোয়াইটস্পেস, লাইন ব্রেক, কমেন্ট এবং ট্রেলিং সেমিকোলন ও অপ্রয়োজনীয় কোটেশনের মতো বাড়তি সিনট্যাক্স ছেঁটে ফেলা। ব্রাউজার মিনিফাইড CSS-কে মূল ফরম্যাটের মতোই পার্স করে। W3C CSS Syntax Module ব্যাকরণ নির্ধারণ করে; টোকেনের মধ্যে হোয়াইটস্পেস অপশনাল, শুধুমাত্র যেখানে এটি আইডেন্টিফায়ার আলাদা করে সেখান ছাড়া। মিনিফিকেশন এই সুযোগ ব্যবহার করে সবকিছু ন্যূনতম প্রয়োজনীয় বর্ণে সংকুচিত করে।

একটি অনলাইন CSS মিনিফায়ার আপনার ফরম্যাট করা স্টাইলশিট নিয়ে ট্রান্সফার আকারের জন্য অপ্টিমাইজড একটি সংক্ষিপ্ত সংস্করণ তৈরি করে। সাধারণ সাশ্রয় ১৫% থেকে ৪০% পর্যন্ত হয়, যা উৎস ফাইলে কতটা হোয়াইটস্পেস এবং কতটি কমেন্ট আছে তার উপর নির্ভর করে। একটি ৫০ KB স্টাইলশিটের ক্ষেত্রে এর অর্থ প্রতিটি পেজ লোডে নেটওয়ার্কে ৭–২০ KB কম বাইট পাঠানো। সার্ভারে gzip বা Brotli কম্প্রেশনের সাথে মিলিয়ে, মিনিফিকেশন চূড়ান্ত ট্রান্সফার আকার আরও কমায়, কারণ ইতিমধ্যে মিনিফাইড CSS কম্প্রেস করলে ফরম্যাট করা মূলটির চেয়ে ছোট আউটপুট পাওয়া যায়।

মিনিফিকেশন ফ্রন্টেন্ড বিল্ড পাইপলাইনে একটি আদর্শ ধাপ। cssnano, clean-css এবং esbuild-এর মতো টুল বিল্ডের অংশ হিসেবে মিনিফিকেশন চালায়। তবে ডেভেলপমেন্টের সময়, আপনার প্রায়ই একটি একক স্নিপেট পরীক্ষার জন্য মিনিফাই করতে হয়, একটি গুরুত্বপূর্ণ CSS ব্লক ইনলাইন করতে হয়, বা বান্ডেল কনফিগে যোগ করার আগে একটি স্টাইলশিট কতটা সংকুচিত হয় তা যাচাই করতে হয়। এখানেই একটি ব্রাউজার-ভিত্তিক CSS মিনিফায়ার কাজে আসে: CSS পেস্ট করুন, মিনিফাইড আউটপুট পান, কপি করুন এবং এগিয়ে যান।

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

এই CSS মিনিফায়ার কেন ব্যবহার করবেন?

যেকোনো CSS পেস্ট করুন এবং মিলিসেকেন্ডের মধ্যে মিনিফাইড আউটপুট পান। কোনো বিল্ড টুল কনফিগারেশন নেই, কোনো CLI কমান্ড নেই, কোনো অ্যাকাউন্ট তৈরি করতে হবে না।

CSS মিনিফায়ারের ব্যবহারের ক্ষেত্র

CSS মিনিফিকেশন কৌশল

একটি CSS মিনিফায়ার ফাইলের আকার কমাতে বেশ কয়েকটি রূপান্তর প্রয়োগ করে। প্রতিটি উৎসে ভিন্ন ধরনের অতিরিক্ততাকে লক্ষ্য করে। নিচের সারণিটি প্রধান কৌশলগুলো এবং একটি ফরম্যাট করা স্টাইলশিটে তাদের সাধারণ সাশ্রয় দেখায়:

সাশ্রয়ের শতাংশ ইনপুটের উপর নির্ভর করে। ভারীভাবে মন্তব্য করা ফাইলগুলো কমেন্ট স্ট্রিপিং থেকে বেশি উপকৃত হয়, আর ইতিমধ্যে-সংক্ষিপ্ত ফাইলগুলো কম সাশ্রয় দেখে। সবচেয়ে নির্ভরযোগ্য সুবিধা হোয়াইটস্পেস অপসারণ ও শর্টহ্যান্ড অপ্টিমাইজেশন থেকে আসে। cssnano-র মতো উন্নত মিনিফায়ার ডুপ্লিকেট সিলেক্টর মার্জ করে, লংহ্যান্ড প্রপার্টি শর্টহ্যান্ডে ভাঁজ করে (margin-top + margin-right + margin-bottom + margin-left → margin) এবং ওভাররাইড হওয়া ডিক্লারেশন সরায়।

মিনিফিকেশন বনাম Gzip কম্প্রেশন

মিনিফিকেশন ও কম্প্রেশন পরিপূরক, পরস্পরের বিকল্প নয়। এগুলো ভিন্ন স্তরে কাজ করে এবং একে অপরের উপর স্তরবদ্ধ হয়:

কোড উদাহরণ

বিভিন্ন ভাষা ও পরিবেশে প্রোগ্রামেটিক্যালি CSS কীভাবে মিনিফাই করা যায়:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

প্রায়শই জিজ্ঞাসিত প্রশ্ন