Кастомные плагины 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.