Налаштування складання Vue.js (Webpack/Vite) для проекту 1С-Бітрікс

Налаштування збірки Vue.js (Webpack/Vite) для проєкту 1С-Бітрікс

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

Vite для нових проєктів

Vite — стандарт для Vue 3-проєктів. Основні переваги в контексті Бітрікс: миттєвий dev-сервер (HMR без повного rebuild), швидка 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 — ~30 KB gzip. Якщо кілька Vue-застосунків на одній сторінці використовують спільні залежності (Vue, Pinia), Rollup має винести їх у shared chunk:

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

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

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 день.