Настройка сборки Vue.js (Webpack/Vite) для проекта 1С-Битрикс

Настройка сборки Vue.js (Webpack/Vite) для проекта 1С-Битрикс

Битрикс исторически жил без сборщика — PHP-шаблоны, CDN-подключения jQuery и плагинов, минимальный JS в template.php. Добавление Vue меняет это: нужна компиляция .vue файлов, транспиляция современного JS, разбивка на чанки, tree-shaking. Неправильно настроенная сборка даёт 1MB+ бандл на каждой странице или конфликты с битриксовыми скриптами.

Vite для новых проектов

Vite — стандарт для Vue 3-проектов. Основные преимущества в контексте Битрикса: мгновенный dev-сервер (HMR без полного ребилда), быстрая production-сборка через Rollup, встроенная поддержка TypeScript и .vue SFC.

Базовая конфигурация для Битрикс-проекта:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [vue()],
    root: 'local/vue-src',
    build: {
        outDir: '../../local/dist',
        emptyOutDir: true,
        manifest: true,  // генерирует manifest.json для PHP
        rollupOptions: {
            input: {
                catalog: 'local/vue-src/catalog/main.js',
                cart: 'local/vue-src/cart/main.js',
                lk: 'local/vue-src/lk/main.js',
            },
        },
    },
    resolve: {
        alias: { '@': path.resolve(__dirname, 'local/vue-src') },
    },
});

manifest: true — Vite генерирует manifest.json с маппингом входной файл → хешированное имя. PHP читает этот файл и подключает актуальный бандл:

// helpers/vite.php
function viteAsset(string $entry): string {
    $manifest = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/local/dist/.vite/manifest.json'), true);
    return '/local/dist/' . $manifest[$entry]['file'];
}

// В шаблоне
\Bitrix\Main\Page\Asset::getInstance()->addJs(viteAsset('catalog/main.js'));

Dev-сервер и прокси

В development-режиме Vite запускает HMR-сервер на порту 5173. Битрикс работает на стандартном 80/443. Прокси в vite.config.js:

server: {
    proxy: {
        '/bitrix': 'http://localhost',
        '/local': 'http://localhost',
        '/api': 'http://localhost',
    },
    https: false,
},

Теперь в браузере открывается http://localhost:5173, Vite проксирует PHP-запросы на Битрикс. HMR работает — изменение .vue файла применяется без перезагрузки страницы.

Альтернатива: запускать Битрикс-сайт как обычно (http://project.loc), а Vite-скрипты подключать с dev-сервера через условие в PHP:

$isDev = getenv('APP_ENV') === 'development';
if ($isDev) {
    echo '<script type="module" src="http://localhost:5173/@vite/client"></script>';
    echo '<script type="module" src="http://localhost:5173/catalog/main.js"></script>';
} else {
    $PAGE->AddScript(viteAsset('catalog/main.js'));
}

Разбивка на чанки и оптимизация

Vue 3 runtime — ~30KB gzip. Если несколько Vue-приложений на одной странице используют одни зависимости (Vue, Pinia), Rollup должен вынести их в shared chunk:

rollupOptions: {
    output: {
        manualChunks: {
            'vue-vendor': ['vue', 'pinia', 'vue-router'],
        },
    },
},

vue-vendor.js загружается один раз и кешируется. Отдельные приложения (каталог, корзина) — маленькие чанки по 10-50KB.

Webpack: когда он обоснован

Webpack остаётся актуальным, если: проект уже использует Laravel Mix (который Битрикс иногда использует как сборщик), команда глубоко знает Webpack-конфигурацию, нужны специфичные плагины без Vite-аналогов.

// webpack.config.js для Битрикс
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    entry: { catalog: './local/vue-src/catalog/main.js' },
    output: { path: path.resolve(__dirname, 'local/dist'), filename: '[name].[contenthash].js' },
    module: {
        rules: [
            { test: /\.vue$/, loader: 'vue-loader' },
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
        ],
    },
    plugins: [new VueLoaderPlugin()],
};

Webpack медленнее Vite в dev-режиме, но production-сборки сопоставимы по размеру.

Конфликты с битриксовыми скриптами

Битрикс подключает jQuery через CJSCore, Vue должен знать, что jQuery — внешняя зависимость:

// vite.config.js
build: {
    rollupOptions: {
        external: ['jquery'],
        output: { globals: { jquery: 'jQuery' } },
    },
}

Если Vue-компонентам не нужен jQuery — external не нужен, они просто не импортируют его.

Типичный срок: базовая настройка Vite с несколькими точками входа, PHP-интеграция через manifest, настройка dev-сервера — 1-2 рабочих дня. Настройка CI/CD пайплайна с автоматической сборкой перед деплоем — дополнительно 1 день.