استفاده از کتابخانه‌های محبوبی مثل Bootstrap Icons یا FontAwesome بسیار راحت است، اما یک هزینه پنهان دارد: حجم فایل! وقتی شما کل فایل CSS و فونت Bootstrap Icons را به پروژه اضافه می‌کنید، در واقع بیش از 1600 آیکون را به کاربر تحمیل می‌کنید، در حالی که شاید کل سایت شما فقط از 20 آیکون استفاده کرده باشد.

در این مقاله، روش اختصاصی و هوشمندی را بررسی می‌کنیم که در سایت taghadosiweb پیاده‌سازی کردیم: اسکن خودکار پروژه با سی‌شارپ، یافتن آیکون‌های مصرفی و ساخت یک فونت WOFF2 اختصاصی.

چرا روش‌های دستی کارآمد نیستند؟

شاید بگویید می‌توان از ابزارهایی مثل IcoMoon استفاده کرد. بله، اما در یک پروژه در حال توسعه که هر روز ممکن است آیکون جدیدی به آن اضافه شود، خروجی گرفتن دستی از IcoMoon عذاب‌آور است. ما به سیستمی نیاز داریم که:

• فایل‌های Razor (.cshtml) را اسکن کند.
• آیکون‌های ذخیره شده در دیتابیس را شناسایی کند.
• فایل CSS و فونت را بر اساس لیست به دست آمده بازسازی کند.

گام اول: اسکن هوشمند با C#

ما یک Console App توسعه دادیم که وظیفه آن پیدا کردن کلاس‌های bi- در کل ویوهای پروژه است. قطعه کد زیر قلب تپنده این اسکنر است:

// اسکن فایل‌های Razor برای پیدا کردن الگوهای bi-iconname

string razorPattern = @“bi-([a-z0-9-]+)”;

var files = Directory.GetFiles(projectViewsPath, “*.cshtml”, SearchOption.AllDirectories);

foreach (var file in files)

{

string content = File.ReadAllText(file);

var matches = Regex.Matches(content, razorPattern, RegexOptions.IgnoreCase);

foreach (Match match in matches)

{

finalIconNames.Add(match.Groups[1].Value.ToLower().Trim());

}

}

گام دوم: اتصال به دیتابیس

در پروژه‌های داینامیک، بسیاری از آیکون‌ها توسط مدیر سایت از پنل ادمین انتخاب می‌شوند. پس اسکن کردن فایل‌ها کافی نیست. ما باید نام آیکون‌ها را از جدول مربوطه (مثلاً جدول Services) هم استخراج کنیم:

using var connection = new SqlConnection(connectionString);

connection.Open();

var sql = “SELECT DISTINCT IconName FROM Services WHERE IconName IS NOT NULL”;

using var command = new SqlCommand(sql, connection);

using var reader = command.ExecuteReader();

while (reader.Read())

{

string icon = reader.GetString(0).Replace(“bi bi-”, “”).Trim().ToLower();

finalIconNames.Add(icon);

}

گام سوم: جراحی فونت با FontTools

بعد از به دست آوردن لیست نهایی آیکون‌ها، با استفاده از کتابخانه قدرتمند fontTools (در پایتون)، نسخه Subset فونت را تولید می‌کنیم. این کار از داخل کد سی‌شارپ و با استفاده از Process.Start انجام می‌شود:

string command = $"python -m fontTools.subset "{fontPath}" " +

$"–output-file="{outputFont}" " +

$"–flavor=woff2 " +

$“–unicodes={unicodeArg}”;

// اجرای دستور در خط فرمان به صورت خودکار

var process = new ProcessStartInfo {

FileName = “cmd.exe”,

Arguments = "/c " + command,

// … سایر تنظیمات

};

Process.Start(process);

گام چهارم: تولید CSS داینامیک و Minify شده

در نهایت، برنامه ما یک فایل bootstrap-icons.css جدید می‌سازد که فقط شامل استایل‌های آیکون‌های پیدا شده است. برای پرفورمنس بهتر، اسکریپت ما نسخه Minified آن را هم در لحظه تولید می‌کند تا هیچ فضای خالی اضافی در فایل باقی نماند.

نتیجه خیره‌کننده

پیش از این عملیات، فایل فونت Bootstrap Icons حدود 120 کیلوبایت بود. پس از اجرای این اسکریپت و استخراج حدود 30 آیکون مورد نیاز پروژه، حجم فایل فونت به حدود 5 کیلوبایت رسید!

• کاهش حجم: بیش از 95 درصد
• تعداد درخواست: ثابت (1 فایل)
• نگهداری: صفر (با هر بار اجرای اسکریپت، همه چیز بروز می‌شود)

جمع‌بندی

پرفورمنس فقط به کدنویسی تمیز خلاصه نمی‌شود؛ بلکه به مدیریت هوشمندانه منابع بستگی دارد. با نوشتن ابزارهای کوچک (Utility Tools) مثل این اسکریپت، می‌توانید پروژه‌های ASP.NET Core خود را به سطح جدیدی از سرعت و بهینگی برسانید.

در مقاله بعدی، به سراغ یکی دیگر از غول‌های کاهش سرعت سایت می‌رویم: بهینه‌سازی تصاویر و فرمت‌های WebP.

آموزش بهینه‌سازی تصاویر و استفاده از WebP در ASP.NET Core →