Могу ли я использовать сборки времени выполнения для всех шаблонов?

В этом ответе мы разберём, можно ли использовать сборки времени выполнения (runtime builds) для всех шаблонов в Vue.js, а также рассмотрим, какие у них преимущества и недостатки.

Что такое сборки времени выполнения?

Сборки времени выполнения (или runtime builds) в Vue.js — это облегчённые версии библиотеки, которые содержат только необходимый код для выполнения приложений, но не включают компилятор, который отвечает за преобразование шаблонов в JavaScript. Это позволяет уменьшить размер итогового бандла.

Стандартные сборки Vue.js

Существует два основных типа сборок Vue.js:

Для установки Vue.js с различными сборками можете использовать CDN, например:

<!-- Сборка с компилятором -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- Сборка времени выполнения -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.runtime.js"></script>

Могу ли я использовать сборки времени выполнения для всех шаблонов?

Сборка времени выполнения может использоваться только в том случае, если вы не планируете использовать строковые шаблоны. Это означает, что вы должны использовать шаблоны, которые имеют вид SFC (Single File Component) или создавать компоненты с использованием JavaScript.

Пример использования сборки времени выполнения:

// main.js
import Vue from 'vue';
import App from './App.vue'; // импортируем SFC

new Vue({
    render: h => h(App),
}).$mount('#app');

Пример компонента Vue с использованием сборки времени выполнения:

<!-- App.vue -->
<template>
  <div>
    <h1>Привет, мир!</h1>
  </div>
</template>

<script>
  export default {
    name: 'App'
  };
</script>

<style>
  h1 {
    color: blue;
  }
</style>

Когда лучше использовать сборку с компилятором?

Если вы используете динамически создаваемые шаблоны (например, как строки) или хотите использовать шаблоны непосредственно в HTML, вам лучше использовать сборку с компилятором:

// динамически создаваемый шаблон
let dynamicTemplate = '<div><h1>{{ message }}</h1></div>';

new Vue({
    el: '#app',
    template: dynamicTemplate,
    data() {
        return {
            message: 'Привет, мир!'
        };
    }
});

Заключение

В заключение, вы можете использовать сборку времени выполнения для различных типов шаблонов, если они представлены в виде SFC или JavaScript-функций. Однако если вам нужно использовать строковые шаблоны, вам потребуется сборка с компилятором. Это важно учитывать при архитектуре вашего приложения на Vue.js, так как выбор сборки может повлиять на производительность и размер бандла.