Перечислите различные сборки vuejs?vue-86

Vue.js предоставляет несколько вариантов сборок, предназначенных для разных сценариев использования. Вот полная классификация с объяснениями:

1. По формату модуля

UMD

<!-- Для прямого использования в браузере -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  • Полная версия: vue.js
  • Runtime-only: vue.runtime.js
  • Характеристики:
    • Работает без системы сборки
    • Автоматически устанавливается в глобальную переменную Vue

CommonJS

// Для старых версий Node.js и сборщиков типа Browserify
const Vue = require('vue/dist/vue.common.js')
  • Используется для серверного рендеринга (SSR)
  • Оптимизирован для Node.js окружения

ES Module

// Для современных сборщиков (Webpack, Rollup, Vite)
import Vue from 'vue/dist/vue.esm.js'
  • Поддерживает tree-shaking
  • Стандарт для современных приложений

2. По функциональности

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

import Vue from 'vue/dist/vue.esm.js' // Vue 2
import { createApp } from 'vue'      // Vue 3 (уже runtime-only)
  • Включает компилятор шаблонов
  • Позволяет компилировать шаблоны в браузере
  • Размер: ```20-30% больше runtime-версии

Runtime-only

import Vue from 'vue/dist/vue.runtime.esm.js' // Vue 2
import { createApp } from 'vue'               // Vue 3
  • Только рендеринг (без компиляции шаблонов)
  • Требует прекомпиляции шаблонов через vue-loader
  • CSP-совместим (без eval)

3. Специальные сборки

Production vs Development

// Development (с предупреждениями и проверками)
vue.esm.js

// Production (минифицированный, без проверок)
vue.esm.prod.js
  • Разница в ```20% размера
  • Development сборка содержит предупреждения и проверки

Vue 3 Специфичные сборки

// Для CDN
vue.global.js        // Полная сборка
vue.runtime.global.js // Runtime-only

// Для сборщиков
vue.esm-bundler.js   // С require('vue') в проектах
  • Включает специальные флаги для сборщиков
  • Оптимизированы для tree-shaking

4. Сборки для серверного рендеринга

Vue 2 SSR сборка

const Vue = require('vue/dist/vue.runtime.common.js')
  • Оптимизирована для Node.js
  • Нет DOM-зависимостей

Vue 3 SSR сборка

import { createSSRApp } from 'vue'
  • Специальный API для гидратации
  • Поддержка stream-рендеринга

Как выбрать правильную сборку?

  1. Современный проект с Vite/Webpack: ES Module версия (автоматически выбирается)
  2. Прямое подключение в браузере: UMD версия
  3. Строгие CSP требования: Runtime-only
  4. Серверный рендеринг: CommonJS или специальная SSR сборка

Примеры конфигурации

Для Webpack (Vue 2):

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

Для Vite (Vue 3):

// Автоматически использует оптимальную сборку
import { createApp } from 'vue'

Резюмируем:

Vue предлагает разнообразные сборки для разных сценариев - от прямого подключения в браузере до сложных SPA-приложений. Современные проекты обычно используют ES Module runtime-only версии, которые обеспечивают лучшую производительность и безопасность.

Вопросы

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