В чем разница между полной сборкой и сборкой только во время выполнения?vue-89

В Vue существует два основных режима сборки: полная (Full) и только во время выполнения (Runtime-only). Они отличаются функциональностью, размером и использованием компилятора шаблонов.

1. Полная сборка

Полная сборка включает в себя компилятор шаблонов, который преобразует строки шаблонов (например, из template: '<div>{{ msg }}</div>') в render-функции на лету.

Характеристики:

• Размер: Больше (```20КБ+), так как включает компилятор.
• Использование: Подходит для разработки, когда шаблоны определяются в строковом виде (например, прямо в компонентах или HTML).
• Пример использования:

  new Vue({
    template: '<div>{{ message }}</div>', // Компилируется в браузере
    data: { message: 'Hello!' }
  }).$mount('#app');
  

Плюсы:

• Гибкость: можно определять шаблоны в runtime (например, загружать их с сервера).

Минусы:

• Медленнее в production, так как компиляция происходит в браузере.
• Несовместимость с строгими CSP (требует unsafe-eval).

2. Сборка только во время выполнения

Runtime-only сборка не включает компилятор шаблонов. Все шаблоны должны быть предварительно скомпилированы в render-функции (например, с помощью vue-loader или vite).

Характеристики:

• Размер: Меньше (```16КБ), так как компилятор исключен.
• Использование: Оптимален для production, особенно с CSP.
• Пример использования (только с предкомпиляцией):

  new Vue({
    render(h) { return h('div', this.message); }, // Готовый render-функция
    data: { message: 'Hello!' }
  }).$mount('#app');
  

Плюсы:

• Лучшая производительность (нет runtime-компиляции).
• Совместимость с CSP (не требует unsafe-eval).
• Меньший размер бандла.

Минусы:

• Шаблоны должны быть скомпилированы заранее (например, через .vue-файлы или плагины сборки).

Как выбрать сборку?

• Runtime-only: Используется по умолчанию в современных инструментах (vue-cli, vite). Подходит для SPA и production.
• Full Build: Требуется, если вы динамически компилируете шаблоны из строк (например, в CMS или legacy-коде).

Настройка в проекте:

• В vue-cli/vite: Runtime-only используется автоматически.
• В ручной сборке: Укажите конкретную сборку:

  import Vue from 'vue/dist/vue.runtime.esm.js'; // Runtime-only
  // Или
  import Vue from 'vue/dist/vue.esm.js'; // Full build
  

Резюмируем:

Полная сборка включает компилятор шаблонов для runtime-компиляции, но увеличивает размер и нарушает CSP. Runtime-only сборка требует предварительной компиляции шаблонов, но оптимизирована для production и безопасна.