‏svelteesp32: فرانت‌اند رو می‌بره داخل فریمور ESP32

تو مخزن svelteesp32 اومده که ایدهٔ اصلی خیلی ساده‌ست: رابط وب دستگاه هم یه خروجی بیلد معمولیه، پس چرا جدا از فریمور نگهش داری؟ این ابزار پوشهٔ dist خروجی Vite یا Webpack رو می‌گیره و یه فایل هدر C++ می‌سازه که محتوای هر فایل رو به شکل آرایهٔ بایت ثابت داخل فلش نگه می‌داره. یعنی رابط وب همراه خود فریمور کامپایل می‌شه.

نویسنده مشکل روش سنتی رو این می‌دونه که SPIFFS و LittleFS (یعنی فایل‌سیستم‌هایی که روی فلش برد ساخته می‌شن) یه پارتیشن جدا لازم دارن و باید جداگانه آپلود بشن. یعنی هر آپدیت OTA دو مرحله داره و خط لولهٔ CI هم شلوغ‌تر می‌شه. با svelteesp32 فقط یه باینری داری و یه بار OTA.

روی خود برد هم کار زیادی لازم نیست؛ هدر رو include می‌کنی و یه تابع صدا می‌زنی:

#include "svelteesp32.h"

PsychicHttpServer server;

void setup() {
    server.listen(80);
    initSvelteStaticFiles(&server);
}

چهار موتور وب‌سرور پشتیبانی می‌شن: PsychicHttpServer V2 که پیش‌فرضه، ESPAsyncWebServer، وب‌سرور خود Arduino و ESP-IDF بومی.

بهینه‌سازی‌ها موقع بیلد اتفاق می‌افتن: gzip سطح ۹ فقط وقتی فایل بالای ۱ کیلوبایت باشه و حداقل ۱۵٪ کوچیک‌تر بشه، تشخیص فایل‌های تکراری با هش SHA256، و ساخت ETag برای گرفتن جواب ۳۰۴ (یعنی مرورگر وقتی فایل عوض نشده دوباره دانلودش نمی‌کنه). تو نسخهٔ ۳.۲.۰ این ETagها طبق RFC 9110 داخل کوتیشن اومدن و به ۱۶ کاراکتر hex کوتاه شدن، یعنی ۱۸ بایت به‌جای ۶۴ بایت تو هر هدر.

از نسخهٔ ۳.۰.۰ یه پلاگین Vite هم اضافه شده که بعد از هر vite build هدر رو خودکار می‌سازه، و چون با enforce از نوع post اجرا می‌شه فایل‌هایی که پلاگین‌های دیگه تولید می‌کنن هم داخلش میان. نویسنده تأکید می‌کنه این ابزار جای حلقهٔ توسعه نیست؛ موقع کار با vite dev روی API واقعی برد کار کن و فقط موقع انتشار هدر رو بساز. حداقل نیاز هم Node.js نسخهٔ ۲۲ به بالاست.

نکات کلیدی:

• خروجی بیلد فرانت‌اند به یه فایل هدر C++ تبدیل و داخل فریمور کامپایل می‌شه، بدون پارتیشن فایل‌سیستم.
• چهار موتور وب‌سرور پشتیبانی می‌شه: psychic (پیش‌فرض)، async، webserver و espidf.
• gzip خودکار فقط برای فایل‌های بالای ۱ کیلوبایت با حداقل ۱۵٪ کاهش حجم فعال می‌شه.
• نسخهٔ ۳.۲.۰: پشتیبانی از HTTP HEAD و ETag استاندارد RFC 9110 با ۱۶ کاراکتر hex.
• نیازمند Node.js ۲۲ به بالا و npm ۱۰ به بالا.