Отметим: когда бандл вашего приложения весит более 2 МБ, а LCP уходит за 3 секунды, причина часто кроется в избыточности фреймворка. Для embed-виджетов, анимаций или расширений браузера Vanilla JavaScript становится единственным адекватным выбором. Мы реализовали более 30 проектов без единого фреймворка, обеспечив LCP менее 1 секунды и бандл размером 20–40 КБ. Отсутствие виртуального DOM и прямой доступ к браузерным API дают максимальную производительность, а экономия бюджета на разработку достигает 40% (до 50 000 ₽ на типовом виджете). Наша команда использует современные возможности языка: Web Components, IntersectionObserver, Proxy и ESModules, чтобы создавать быстрые и надежные решения. Каждый проект начинается с аудита метрик и подбора оптимальной архитектуры. Свяжитесь с нами для аудита вашего проекта.
Когда Vanilla JS становится единственным верным выбором
Vanilla JS оправдан в сценариях, где фреймворки добавляют излишнюю сложность. Embed-виджеты встраиваются на чужие сайты — нельзя конфликтовать с их фреймворками. Библиотеки для npm с нулевыми зависимостями не утяжеляют проект пользователей с другим стеком. Высоконагруженные анимации используют Canvas API, WebGL и Web Animations API напрямую, без прослойки virtual DOM. Расширения браузера работают в изолированной среде Content Scripts, где фреймворки увеличивают риски. Статические сайты с минимальной интерактивностью не требуют 50 КБ ради одного дропдауна. Типовой виджет на Vanilla JS обойдётся на 30-50% дешевле, чем на React.
| Сценарий | Vanilla JS | React | Vue |
|---|---|---|---|
| embed-виджет | оптимально | избыточно | избыточно |
| SPA с формами | сложно | оптимально | оптимально |
| Анимации | отлично | средне | средне |
В одном из проектов мы заменили React-виджет корзины на Vanilla JS. Бандл сократился с 120 КБ до 28 КБ (снижение на 77%), LCP упал с 2,4 с до 0,8 с (на 67% быстрее). Нагрузка на CPU снизилась на 40%. Vanilla JS загружается в 2 раза быстрее React на медленных соединениях, а экономия на разработке составила около 40 000 ₽.
Почему Vanilla JS превосходит фреймворки по производительности
Отсутствие virtual DOM исключает накладные расходы на сравнение и перерисовку. Прямая работа с document.createElement и appendChild позволяет управлять каждым обновлением вручную. В сочетании с IntersectionObserver для ленивой загрузки и requestAnimationFrame для анимаций вы получаете LCP менее 1 секунды даже на мобильных устройствах. Мы также используем preload для критических ресурсов и prefetch для следующих страниц. Сокращение бандла на 77% и экономия бюджета на разработку до 40% — не редкость при миграции на чистый JS.
| Характеристика | Vanilla JS | React (типовой проект) |
|---|---|---|
| Размер бандла | 20–40 KB | 80–150 KB (с React DOM) |
| Контроль | полный | ограничен virtual DOM |
| Зависимости | нулевые | React + экосистема |
| Совместимость | любой сайт | может конфликтовать |
| Производительность LCP | < 1 с | 1–2 с (среднее) |
Какие современные возможности Vanilla JS доступны
Браузерные API значительно расширились: теперь доступны Custom Elements, Shadow DOM, AbortController, Proxy, Service Workers. Пример Fetch с таймаутом:
async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) { const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { ...options, signal: controller.signal }); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } finally { clearTimeout(timeout); } } Web Components — компонентная модель без фреймворка
class ProductCard extends HTMLElement { static get observedAttributes() { return ['product-id']; } connectedCallback() { this.#render(); this.#attachEvents(); } attributeChangedCallback(name, oldVal, newVal) { if (name === 'product-id' && oldVal !== newVal) { this.#fetchProduct(newVal); } } async #fetchProduct(id) { const data = await fetchWithTimeout(`/api/products/${id}`); this.#update(data); } #render() { this.innerHTML = ` <article class="product-card"> <img class="product-card__img" alt=""> <h3 class="product-card__name"></h3> <span class="product-card__price"></span> <button class="product-card__btn">В корзину</button> </article> `; } #update({ name, price, image }) { this.querySelector('.product-card__img').src = image; this.querySelector('.product-card__name').textContent = name; this.querySelector('.product-card__price').textContent = `${price} ₽`; } #attachEvents() { this.querySelector('.product-card__btn').addEventListener('click', () => { this.dispatchEvent(new CustomEvent('add-to-cart', { bubbles: true, detail: { productId: this.getAttribute('product-id') } })); }); } } customElements.define('product-card', ProductCard); MDN: Web ComponentsИспользование в HTML: <product-card product-id="42"></product-card>. Работает в любом фреймворке или без него.
Управление состоянием с Proxy: реактивный store без Redux
function createStore(initialState) { const listeners = new Set(); const state = new Proxy(structuredClone(initialState), { set(target, key, value) { target[key] = value; listeners.forEach(fn => fn(structuredClone(target))); return true; } }); return { state, subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); }, getSnapshot: () => structuredClone(state), }; } const cartStore = createStore({ items: [], total: 0 }); cartStore.subscribe(state => { document.getElementById('cart-count').textContent = state.items.length; }); Структура проекта с ESModules
src/ components/ product-card.js modal.js lib/ store.js api.js utils.js pages/ catalog.js product.js app.js { "type": "module", "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "vite": "^5.0.0" } } Нулевых runtime-зависимостей. Vite только для разработки и сборки.
Как мы работаем над проектами на Vanilla JS
- Аналитика — определяем критичные сценарии, замеряем метрики (LCP, TTFB).
- Проектирование — архитектура модулей, карта компонентов, API-контракты.
- Реализация — итеративная разработка с код-ревью и тестами (Vitest + jsdom).
- Оптимизация — bundle splitting, prefetch, lazy loading, tree-shake.
- Деплой — сборка через Vite, выкладка на CDN или хостинг.
Что входит в работу
- Исходный код на ESModules с комментариями.
- Документация по компонентам и инструкция по развертыванию.
- Гарантия поддержки 3 месяца после сдачи.
- Метрики производительности до и после.
Сроки ориентировочно
- Простой виджет (до 5 компонентов) — от 2 до 5 дней.
- Средний проект (до 20 компонентов) — от 1 до 3 недель.
- Комплексное приложение (до 50 компонентов) — от 4 до 8 недель.
Стоимость рассчитывается индивидуально. Оценим ваш проект бесплатно — напишите нам. Обсудим ваш проект — закажите консультацию. Дополнительная экономия бюджета до 50 000 ₽ возможна при миграции с фреймворков.