Разработка кастомного плагина 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-объекты для эмуляции сетевых запросов.
Почему кастомный плагин быстрее готового?
Готовые плагины часто перегружены: включают лишний функционал, сложно конфигурируются, редко обновляются. Кастомный плагин пишется под конкретную задачу, легче поддерживается и работает быстрее за счёт отсутствия мёртвого кода. Например, готовый плагин для изображений может тащить зависимости для форматов, которые вам не нужны, а кастомный — только необходимые. Сравнение:
| Характеристика | Готовый плагин | Кастомный плагин |
|---|---|---|
| Функционал | Избыточный | Только нужное |
| Конфигурация | Сложная, много опций | Простая, под ваши параметры |
| Производительность | Медленнее из-за лишнего кода | Оптимальная |
| Поддержка | Зависит от автора | Вы полностью контролируете |
Кастомный плагин — это инвестиция в скорость и качество сборки.
Процесс работы
- Аналитика: разбираем текущий проект, выявляем повторяющиеся задачи.
- Проектирование: проектируем API плагина — входные параметры, конфиг, возвращаемые значения.
- Реализация: пишем код с тестами (Jest), используем async/await, обработку ошибок.
- Тестирование: запускаем сборку с плагином, проверяем выходные файлы.
- Деплой: подключаем плагин к проекту, документируем использование.
Сроки и стоимость
| Тип плагина | Сложность | Сроки |
|---|---|---|
| Простой (фильтры, 2-3 шорткода) | Низкая | 1-2 дня |
| Средний (асинхронные операции, изображения) | Средняя | 3-5 дней |
| Комплексный (API, мультиязычность, тесты, npm публикация) | Высокая | 1-2 недели |
Стоимость рассчитывается индивидуально. Оценка проекта — бесплатно. Свяжитесь с нами — мы подберём оптимальное решение под ваш бюджет.
Что входит в результат
- Исходный код плагина с комментариями.
- Документация по установке и настройке.
- Тесты (Jest) для ключевых сценариев.
- Неделя поддержки после деплоя.
Распространённые ошибки при разработке: забывают обрабатывать ошибки в асинхронных шорткодах, не проверяют типы входных данных, используют синхронные операции там, где нужны async. Наш процесс это исключает.
Мы гарантируем качество: опыт на рынке более 5 лет, 50+ реализованных проектов. Получите бесплатную консультацию — обсудим ваш проект и предложим оптимальное решение. Экономия бюджета и времени на поддержку — вот что вы получаете с кастомным плагином. Ваша выгода — снижение затрат на хостинг и ускорение разработки.
Подробнее об API Eleventy на GitHub.