VUE VAPOR: новая экспериментальная фича

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, если:

• Вам нужна максимальная производительность
• Вам нравится декларативный подход
• Вы хотите уменьшить размер приложения