Кастомні плагіни Eleventy: розробка, тестування та оптимізація

Розробка кастомного плагіна Eleventy

Одного разу клієнт витратив два тижні на ручну оптимізацію зображень при збірці — ми написали плагін за день, який автоматично генерує WebP та AVIF. Після цього проєкту ми формалізували процес і тепер пропонуємо розробку плагінів під ключ. Стандартний Eleventy дає багато, але не все: кастомна обробка зображень, інтеграція з headless CMS, мультимовність — без плагіна це перетворюється на копіпасту та крихкі хелпери. Плагін же дає перевикористовувану, тестовану логіку, що скорочує час розробки та підтримки. Завдяки модульності такий підхід легко масштабувати: написаний одного разу плагін можна використовувати в десятках проєктів, економлячи сотні годин.

Які проблеми вирішуємо

• Кастомна обробка зображень зі стисненням, множиною форматів і розмірів — економія до 40% об'єму збірки. В одному проєкті ми знизили підсумковий розмір сайту з 150 МБ до 90 МБ лише за рахунок плагіна зображень. Це призвело до економії на хостингу до 30%.
• Інтеграція з зовнішніми API з кешуванням та обробкою помилок — підвантаження товарів з headless CMS. Плагін обробляє таймаути та повтори, гарантуючи стабільну збірку.
• Складні трансформації HTML — видалення невикористовуваних стилів, додавання critical CSS, вставка метаданих. Це знижує час завантаження сторінки на 20% за даними Lighthouse.
• Мультимовність з динамічними маршрутами та локаллю в URL — плагін генерує сторінки для кожної мови, підтягуючи переклади з JSON.

Без плагіна ці завдання вирішуються разовими скриптами, які складно підтримувати та тестувати. Плагін же інкапсулює всю логіку і може бути повторно використаний в інших проєктах.

Як розробити плагін Eleventy для оптимізації зображень?

Візьмемо реальний кейс: інтернет-магазин на Eleventy з сотнями картинок. Потрібно генерувати WebP та AVIF, робити декілька розмірів, а в вихідниках — прозорі PNG. Ми написали плагін на базі @11ty/eleventy-img:

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" %} в шаблоні генерує <picture> з AVIF, WebP та JPG. Плагін замінює собою ручну оптимізацію і зменшив розмір збірки на 40%. Подібний підхід можна застосувати до будь-яких повторюваних завдань: від конвертації Markdown до генерації sitemap.

Як тестувати кастомний плагін Eleventy?

Для тестування використовуйте Jest або Mocha. Запустіть Eleventy в тестовому режимі, передавши конфігурацію з плагіном, та перевірте вихідні файли. Також тестуйте окремі функції плагіна: фільтри, шорткоди, асинхронні операції. Приклад тесту для нашого плагіна:

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-об'єкти для емуляції мережевих запитів.

Чому кастомний плагін швидший за готовий?

Готові плагіни часто перевантажені: включають зайвий функціонал, складно конфігуруються, рідко оновлюються. Кастомний плагін пишеться під конкретне завдання, легше підтримується і працює швидше за рахунок відсутності мертвого коду. Наприклад, готовий плагін для зображень може тягнути залежності для форматів, які вам не потрібні, а кастомний — лише необхідні. Порівняння:

Кастомний плагін — це інвестиція в швидкість та якість збірки.

Процес роботи

1. Аналітика: розбираємо поточний проєкт, виявляємо повторювані завдання.
2. Проектування: проектуємо API плагіна — вхідні параметри, конфіг, значення, що повертаються.
3. Реалізація: пишемо код з тестами (Jest), використовуємо async/await, обробку помилок.
4. Тестування: запускаємо збірку з плагіном, перевіряємо вихідні файли.
5. Деплой: підключаємо плагін до проєкту, документуємо використання.

Строки та вартість

Вартість розраховується індивідуально. Оцінка проєкту — безкоштовно. Зв'яжіться з нами — ми підберемо оптимальне рішення під ваш бюджет.

Що входить в результат

• Вихідний код плагіна з коментарями.
• Документація по встановленню та налаштуванню.
• Тести (Jest) для ключових сценаріїв.
• Тиждень підтримки після деплою.

Розповсюджені помилки при розробці: забувають обробляти помилки в асинхронних шорткодах, не перевіряють типи вхідних даних, використовують синхронні операції там, де потрібні async. Наш процес це виключає.

Ми гарантуємо якість: досвід на ринку більше 5 років, 50+ реалізованих проєктів. Отримайте безкоштовну консультацію — обговоримо ваш проєкт і запропонуємо оптимальне рішення. Економія бюджету та часу на підтримку — ось що ви отримуєте з кастомним плагіном. Ваша вигода — зниження витрат на хостинг та прискорення розробки.

Детальніше про API Eleventy на GitHub.