Vue.js готовится к существенному скачку производительности благодаря новой экспериментальной функции под названием Vapor Mode. Вдохновленная Solid.js, эта стратегия компиляции кода нацелена на повышение эффективности ваших приложений за счет создания более оптимизированного JavaScript-вывода.
Что такое Vapor Mode?
Vapor Mode — это альтернативный подход к компиляции кода, который полностью отказывается от использования виртуального DOM при работе на уровне всего приложения. Благодаря этому размер вашего приложения значительно сокращается.
Преимущества Vapor Mode:
Повышение производительности
Снижение потребления памяти
Уменьшение объема вспомогательного кода среды выполнения
Возможность внедрения Vapor Mode стала доступной благодаря схожести систем реактивности Vue.js и Solid.js, обе из которых используют Proxy объекты с автоматическим отслеживанием на основе чтения.
Как работает Vapor Mode?
Vapor Mode способна преобразовать стандартный Vue-компонент (Single File Component) в более производительный JavaScript-код.
Для достижения максимальной производительности Vapor Mode изначально будет поддерживать ограниченное подмножество функций Vue.js, включая новый Composition API и формат SFC-компонентов с <script setup>, являющийся новым стандартным способом написания приложений в Vue 3.
Текущий подход Vue.js
В настоящее время Vue.js использует комбинированный подход, сочетающий виртуальный DOM и компилятор. Компилятор анализирует шаблон компонента и передает его виртуальному DOM. Такой подход с использованием компилятора обеспечивает Vue.js небольшое преимущество в производительности по сравнению с инструментами, не использующими виртуальный DOM, такими как Svelte 4, при выполнении операций с DOM.
Использование Vapor Mode
Vapor Mode можно включать на уровне компонентов, используя суффикс .vapor в имени файла компонента. Конечная цель — обеспечить свободное смешение компонентов Vapor и обычных компонентов внутри одного приложения.
Примечание: Изначально Vapor Mode может начинаться с дерева компонентов, работающих только в режиме Vapor, интегрированного в виртуальный DOM, с последующим улучшением взаимодействия между ними.
На уровне приложения:
Приложения, скомпилированные таким образом, смогут полностью отказаться от среды выполнения виртуального DOM и будут включать только @vue/reactivity и вспомогательные функции среды выполнения Vapor Mode, которые отличаются крайне малым весом. Приложение, написанное таким образом, будет иметь базовый размер около 6 Кб по сравнению с текущими 50 Кб базового размера приложения Vue 3 с виртуальным DOM. Это колоссальное сокращение на 88%!
Ключевые особенности Vapor Mode:
Дополнительная функция, не влияющая на существующие базы кода.
Обновление до версии Vue.js с Vapor Mode не повлечет за собой изменений, связанных с Vapor Mode.
Vapor Mode сможет взаимодействовать с компонентами, использующими виртуальный DOM. Таким образом, Vapor Mode будет по-прежнему поддерживать любые библиотеки, использующие виртуальный DOM, например Vuetify.
Этапы разработки Vapor Mode:
Уже готов экспериментальный релиз Vapor Mode, как велась разработка:
Этап 1: Среда выполнения для основных функций
На этом этапе внедряются все вспомогательные функции среды выполнения Vapor Mode. Эти функции по сути являются кодом, помогающим сгенерированному коду.
Цели:
Поддержка основных директив (v-on, v-if, v-for и т.д.) и древа компонентов.
Подтверждение предположений о производительности.
Совместимость гидратации с существующим выводом SSR (Server-Side Rendering).
Этап 2: Компилятор для основных функций
Основная задача этого этапа — обеспечить преобразование шаблона Vue или JSX во что-то, что сможет обработать среда выполнения.
Цели:
Общее промежуточное представление (Intermediate Representation) для генерации кода.
Дерево синтаксического анализа JSX / Дерево синтаксического анализа шаблона — Промежуточное представление — Код Vapor Mode.
Этап 3: Интеграция
Vue стремится к тому, чтобы Vapor Mode можно было без труда внедрять в существующие приложения без необходимости модифицировать вашу текущую архитектуру. У вас будет возможность выборочно включать Vapor Mode на уровне компонентов, постепенно внедряя его в определенные части вашего приложения или в зоны, требующие высокой производительности.
Цели этого этапа:
Поддержка инструментов для создания отдельных Vapor-приложений
Запуск Vapor-компонентов внутри существующих приложений
Запуск компонентов с использованием виртуального DOM внутри Vapor-приложений
Этап 4: Функциональное равенство
Начальная версия Vapor Mode будет предоставлять только основные ядраные функции, в то время как некоторые вспомогательные функции, такие как <Transition />, <KeepAlive />, <Teleport /> и Suspense, будут реализованы.
Итого
Vue Vapor – это экспериментальная ветвь Vue.js, предлагающая отрисовку без виртуального DOM. Это может значительно повысить производительность, особенно для крупных приложений.
Ключевые особенности:
Без виртуального DOM: Vue Vapor напрямую работает с реальным DOM, уменьшая количество вычислений и ускоряя отрисовку.
Улучшенная компонентная модель: основана на «сигналах», делая компоненты более декларативными, простыми и понятными.
Меньший размер: подходит для небольших приложений.
Важно понимать, что:
Находится в стадии разработки: показывает многообещающие результаты.
Может быть нестабильным: рекомендуется тщательно тестировать перед использованием в production-среде.
Используйте Vue Vapor, если:
Вам нужна максимальная производительность
Вам нравится декларативный подход
Вы хотите уменьшить размер приложения