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

Vue.js представляет Vapor Mode — новую стратегию компиляции, которая выводит производительность ваших приложений на новый уровень.

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

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

В этом обзоре рассказываем о методах, которые могут повысить производительность вашего веб-приложения Laravel.

Что нового в Chrome 118
Что нового в Chrome 118
Что нового в Chrome 118

Кратко рассказываем об обновлениях Chrome.

Apple Vision Pro: какие приложения не будут работать
Apple Vision Pro: какие приложения не будут работать
Apple Vision Pro: какие приложения не будут работать

Очки дополненной реальности могут внести новый опыт для веб-разработки и приложений. Какие приложения уже работаю с Vision Pro.

Вышел релиз Chrome 120
Вышел релиз Chrome 120
Вышел релиз Chrome 120

В этом материале рассказываем о нескольких крупных обновлениях. Релиз Chrome 121 запланирован на 23 января 2024 года.