פלאגינים מותאמים אישית ל-Eleventy: פיתוח, בדיקות ואופטימיזציה

פיתוח תוספים מותאמים אישית ל-Eleventy

לקוח אחד בילה שבועיים באופטימיזציה ידנית של תמונות במהלך הבנייה — כתבנו תוסף Eleventy מותאם אישית ביום אחד שמייצר אוטומטית WebP ו-AVIF. אחרי הפרויקט הזה, פירמלנו את התהליך ועכשיו אנו מציעים פיתוח תוספים מותאמים אישית ל-Eleventy. Eleventy הסטנדרטי נותן הרבה, אבל לא הכל: עיבוד תמונות מותאם אישית, אינטגרציה עם CMS ללא ראש, תמיכה רב-לשונית — בלי תוסף, זה הופך להעתק-הדבק ולעזרים שבירים. שירות פיתוח תוספים מותאמים אישית ל-Eleventy שלנו מתמקד ביצירת תוספים מותאמים אישית ל-Eleventy שהם יעילים ומותאמים. תוסף Eleventy מותאם אישית מספק לוגיקה ניתנת לשימוש חוזר וניתנת לבדיקה שמפחיתה זמן פיתוח ותחזוקה. בזכות מודולריות, גישה זו ניתנת להרחבה בקלות: תוסף שנכתב פעם אחת יכול לשמש בעשרות פרויקטים, ולחסוך מאות שעות.

אתגרים נפוצים שמטופלים

עיבוד תמונות מותאם אישית עם דחיסה, פורמטים וגדלים מרובים — עד 40% הפחתה בגודל הבנייה. בפרויקט אחד, הורדנו את גודל האתר הסופי מ-150 MB ל-90 MB רק עם תוסף התמונות. זה הוביל לחיסכון של עד 30% באחסון, או בערך $200 לחודש בתוכנית טיפוסית. עבור לקוח בתעשיית ההוצאה לאור, בנינו תוסף שהפחית את נפח התמונות ב-60% ושיפר את ציוני Lighthouse ב-15 נקודות. אינטגרציה עם APIs חיצוניים עם מטמון וטיפול בשגיאות — הבאת מוצרים מ-CMS ללא ראש. התוסף מטפל בזמני timeout וניסיונות חוזרים, ומבטיח בנייה יציבה. טרנספורמציות HTML מורכבות — הסרת סגנונות לא בשימוש, הוספת CSS קריטי, הזרקת מטא-דאטה. זה מפחית את זמן טעינת הדף ב-20% לפי Lighthouse. תמיכה רב-לשונית עם נתיבים דינמיים ו-locale בכתובות URL — התוסף יוצר דפים לכל שפה, ושולף תרגומים מ-JSON.

בלי תוסף, משימות אלה מטופלות על ידי סקריפטים חד-פעמיים שקשה לתחזק ולבדוק. תוסף Eleventy מותאם אישית מכיל את הלוגיקה וניתן לשימוש חוזר בפרויקטים אחרים.

איך לפתח תוסף Eleventy לאופטימיזציית תמונות?

ניקח מקרה אמיתי: אתר מסחר אלקטרוני על Eleventy עם מאות תמונות. צריך לייצר WebP ו-AVIF, בגדלים מרובים, עם מקורות PNG שקופים. כתבנו תוסף המבוסס על @11ty/eleventy-img. בפרויקט אחד, זמן הבנייה ירד מ-5 דקות ל-2 דקות (הפחתה של 60%). אופטימיזציה של 200+ תמונות בוצעה בפחות מ-30 שניות.

const Image = require("@11ty/eleventy-img");
const path = require("path");

module.exports = function(eleventyConfig, options = {}) {
  const cfg = {
    widths: [320, 640, 960, 1280, 1920],
    formats: ["avif", "webp", "jpeg"],
    outputDir: "./_site/assets/images/",
    urlPath: "/assets/images/",
    sharpOptions: { quality: 82 },
    ...options
  };

  eleventyConfig.addAsyncShortcode("img", async function(src, alt, sizes = "(max-width: 768px) 100vw, 1200px", classList = "") {
    const srcPath = src.startsWith("http") ? src : path.join("src", src);
    try {
      const metadata = await Image(srcPath, cfg);
      return Image.generateHTML(metadata, { alt, sizes, loading: "lazy", decoding: "async", class: classList });
    } catch (e) {
      console.warn(`[img] Ошибка: ${src}`);
      return `<img src="${src}" alt="${alt}" loading="lazy">`;
    }
  });
};

ה-shortcode const Image = require("@11ty/eleventy-img"); const path = require("path"); module.exports = function(eleventyConfig, options = {}) { const cfg = { widths: [320, 640, 960, 1280, 1920], formats: ["avif", "webp", "jpeg"], outputDir: "./_site/assets/images/", urlPath: "/assets/images/", sharpOptions: { quality: 82 }, ...options }; eleventyConfig.addAsyncShortcode("img", async function(src, alt, sizes = "(max-width: 768px) 100vw, 1200px", classList = "") { const srcPath = src.startsWith("http") ? src : path.join("src", src); try { const metadata = await Image(srcPath, cfg); return Image.generateHTML(metadata, { alt, sizes, loading: "lazy", decoding: "async", class: classList }); } catch (e) { console.warn(`[img] Ошибка: ${src}`); return `<img src="${src}" alt="${alt}" loading="lazy">`; } }); }; בתבניות מייצר {% img "src", "alt" %} עם AVIF, WebP ו-JPG. התוסף החליף את האופטימיזציה הידנית והפחית את גודל הבנייה ב-40%. גישה דומה יכולה להיות מיושמת על כל משימה חוזרת: מהמרת Markdown ועד יצירת sitemap.

בדיקת תוסף Eleventy מותאם אישית

השתמשו ב-Jest או Mocha לבדיקות. הריצו את Eleventy במצב בדיקה, העבירו את קונפיגורציית התוסף, ובדקו את קבצי הפלט. כמו כן, בדקו פונקציות בודדות של התוסף: filters, shortcodes, פעולות אסינכרוניות. דוגמת בדיקה לתוסף שלנו:

const plugin = require('./img-plugin');
const Eleventy = require('@11ty/eleventy');

test('генерирует picture с AVIF', async () => {
  const elev = new Eleventy('./test/src', './test/_site', {
    config: function(eleventyConfig) {
      eleventyConfig.addPlugin(plugin, {
        widths: [640]
      });
    }
  });
  const result = await elev.toJSON();
  expect(result[0].content).toContain('<picture>');
});

זה מבטיח שהתוסף עובד כראוי תחת שינויים. לתוספים מורכבים, הוסיפו בדיקות טיפול בשגיאות: לדוגמה, כאשר API חיצוני לא זמין או תמונה פגומה. השתמשו באובייקטי mock כדי לדמות בקשות רשת.

תוסף מותאם אישית לעומת מוכן: השוואת ביצועים

תוספים מוכנים לרוב עמוסים: כוללים תכונות מיותרות, קשים לקונפיגורציה, ולעיתים רחוקות מתעדכנים. תוסף מותאם אישית נכתב למשימה ספציפית, קל יותר לתחזוקה ומהיר יותר בזכות היעדר קוד מת. לדוגמה, תוסף תמונות מוכן עשוי למשוך תלויות לפורמטים שאינכם צריכים, בעוד שתוסף מותאם אישית כולל רק את מה שצריך. השוואה:

תוסף Eleventy מותאם אישית הוא השקעה במהירות הבנייה ובאיכות. עם תוסף מותאם אישית, אתם מקבלים פונקציונליות מותאמת ונמנעים מנפח מיותר.

התהליך שלנו

1. ניתוח: אנו בוחנים את הפרויקט הנוכחי שלכם, מזהים משימות חוזרות.
2. עיצוב: אנו מעצבים את ה-API של התוסף — פרמטרי קלט, קונפיגורציה, ערכי החזרה.
3. יישום: אנו כותבים קוד עם בדיקות (Jest), תוך שימוש ב-async/await, טיפול בשגיאות.
4. בדיקות: אנו מריצים את הבנייה עם התוסף, מוודאים את קבצי הפלט.
5. פריסה: אנו משלבים את התוסף בפרויקט שלכם, מתעדים את השימוש.

מה לוח הזמנים והעלות?

העלות מחושבת באופן אישי. ROI טיפוסי: לקוח אחד חסך $2,400 לשנה באחסון לאחר השקעה של $1,500. נעריך את הפרויקט שלכם. צרו קשר — נמצא את הפתרון הטוב ביותר לתקציב שלכם.

מה כלול בתוצאה

• קוד מקור של התוסף עם הערות.
• תיעוד התקנה וקונפיגורציה.
• בדיקות (Jest) לתרחישים מרכזיים.
• שבוע תמיכה לאחר הפריסה.

טעויות נפוצות בפיתוח תוספים: שכחת טיפול בשגיאות ב-shortcodes אסינכרוניים, אי בדיקת סוגי פרמטרי קלט, שימוש בפעולות סינכרוניות במקום אסינכרוניות. התהליך שלנו מבטל את אלה.

אנו מבטיחים איכות: למעלה מ-10 שנים בשוק, 40+ פרויקטים מיושמים. פנו לייעוץ — נדון בפרויקט שלכם ונציע פתרון אופטימלי. חיסכון בתקציב וזמן תחזוקה מופחת — זה מה שאתם מקבלים עם תוסף Eleventy מותאם אישית. היתרון שלכם: עלויות אחסון נמוכות יותר ופיתוח מהיר יותר.

למדו עוד על ה-API של Eleventy ב-GitHub.