Можно ли использовать сборки времени выполнения для всех шаблонов?vue-111

Да, в Vue.js можно использовать сборки времени выполнения (runtime-only builds) для всех шаблонов, но с важными ограничениями и особенностями.

Различие между сборками

  1. Полная сборка (Full Build):

    • Включает компилятор шаблонов
    • Позволяет компилировать строковые шаблоны на клиенте
    • Больший размер (```30% больше runtime-only)

  2. Сборка времени выполнения (Runtime-only):

    • Нет компилятора шаблонов
    • Только предварительно скомпилированные шаблоны
    • Меньший размер, лучшая производительность

Как использовать runtime-only для всех шаблонов

1. Предварительная компиляция шаблонов

Все шаблоны должны быть предварительно скомпилированы в render-функции:

// Вместо строкового шаблона
{
  template: '<div>{{ message }}</div>'
}

// Используйте render-функцию
{
  render() {
    return h('div', this.message)
  }
}

2. Настройка сборки в проекте

В vue.config.js:

module.exports = {
  runtimeCompiler: false // Отключает компилятор шаблонов
}

3. Использование однофайловых компонентов

SFC автоматически компилируются в render-функции при сборке:

<template>
  <!-- Этот шаблон будет предварительно скомпилирован -->
  <div>{{ message }}</div>
</template>

Ограничения runtime-only

  1. Нельзя использовать:

    • Строковые шаблоны через template: '...'
    • DOM-шаблоны через el: '#app' с inline-шаблонами
    • Динамическую компиляцию шаблонов на клиенте

  2. Требуется:

    • Webpack/Vite с vue-loader для .vue файлов
    • Предварительная компиляция всех шаблонов

Обходные пути

  1. Рендер-функции:
Vue.createApp({
  render() {
    return h('div', 'Hello World')
  }
}).mount('#app')
  1. JSX (если настроен):
render() {
  return <div>{this.message}</div>
}
  1. Динамические компоненты через <component :is="">

Преимущества runtime-only

  1. Меньший размер бандла (на ```30%)
  2. Лучшая производительность (нет компиляции на клиенте)
  3. Более строгая CSP (без eval/new Function)

Когда нужна полная сборка

  1. Динамическая компиляция шаблонов из строк
  2. Использование template в корневом экземпляре
  3. Интеграция с серверным рендерингом без сборки

Настройка в разных инструментах

Webpack

// webpack.config.js
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.runtime.esm-bundler.js'
  }
}

Vite

// vite.config.js
export default {
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.runtime.esm-bundler.js'
    }
  }
}

Резюмируем:

  • Runtime-only сборки можно использовать для всех шаблонов при правильной настройке
  • Все шаблоны должны быть предварительно скомпилированы
  • SFC (.vue файлы) - лучший подход для работы с runtime-only
  • Полная сборка нужна только для специфических случаев
  • Runtime-only дает преимущества в размере и безопасности
  • Настройка зависит от используемого инструмента сборки

Вопросы

Собеседования