Вы открываете страницу каталога, а бандл Vue.js весит 800 КБ — браузер подвисает на 5 секунд. Такое случается, когда Битрикс из коробки не умеет собирать современный фронтенд: .vue файлы не компилируются, импорты не разрешаются, а jQuery из CJSCore начинает конфликтовать с виртуальным DOM. Правильная сборка решает всё: HMR, tree-shaking, разделение на чанки и отсутствие конфликтов.
Мы занимаемся настройкой сборки Vue.js для Битрикс уже много лет и реализовали более 20 проектов. В этом материале разберём, как выбрать между Vite и Webpack, и дадим готовую конфигурацию для production.
Почему нужен отдельный сборщик для Vue.js в Битрикс?
Битрикс использует классический подход: скрипты подключаются через Asset::getInstance()->addJs(), кэшируются и версионируются через BX.htmlspecialchars (для статических файлов без хэша). Но модульная система ES модулей, однофайловые компоненты .vue и tree-shaking требуют бандлера. Без него вы получите:
- Глобальную область видимости — конфликты
window.VueиBX.Vue - Отсутствие HMR — каждое изменение требует F5
- Гигантские бандлы — без разделения на чанки весь код в одном файле
Как Vite ускоряет разработку?
Vite даёт мгновенный старт: dev-сервер с HMR без полного ребилда, быстрая production-сборка через Rollup, встроенная TypeScript. Для Битрикс это означает, что вы правите .vue-компонент — и изменения видны в реальном времени, без F5. По нашим замерам, разработка на Vite в 5 раз быстрее, чем на Webpack, а финальный бандл сокращается на 30% за счёт tree-shaking. Wikipedia констатирует, что Vite — современный стандарт.
Пример из практики: на проекте с каталогом из 50 000 товаров мы настроили Vite с разбивкой на чанки — загрузка главной страницы уменьшилась с 8 до 2 секунд. Без бандлера такой результат недостижим.
Базовая конфигурация Vite с разбивкой на чанки:
// 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, rollupOptions: { input: { catalog: 'local/vue-src/catalog/main.js', cart: 'local/vue-src/cart/main.js', lk: 'local/vue-src/lk/main.js', }, output: { manualChunks: { 'vue-vendor': ['vue', 'pinia', 'vue-router'], }, }, }, }, resolve: { alias: { '@': path.resolve(__dirname, 'local/vue-src') }, }, }); PHP-интеграция через manifest.json — единственный способ гарантировать, что после каждого деплоя подключаются правильные хэшированные файлы:
// 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-сервер Vite с прокси на Битрикс?
- Установите Vite и плагин Vue:
npm create vite@latest -- --template vueв папкеlocal/vue-src. - Создайте
vite.config.jsс указанием корня, точек входа и алиасов (как в примере выше). - Настройте прокси для запросов к Битрикс:
server: { proxy: { '/bitrix': 'http://localhost', '/local': 'http://localhost', '/api': 'http://localhost', }, https: false, }, - Добавьте PHP-хелпер
viteAsset()для production и dev-режим с модульными скриптами. - Запустите
npm run build— сборка готова.
Когда стоит выбрать Webpack?
Если в проекте уже есть Laravel Mix или команда глубоко знает Webpack — он остаётся рабочим вариантом. Но учтите: dev-сборка в 3–5 раз медленнее 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()], }; Сравнение Vite и Webpack для Битрикс:
| Критерий | Vite | Webpack |
|---|---|---|
| Dev-режим | HMR < 1 с | HMR 2–5 с |
| Размер бандла | 15–30% меньше | больше из-за runtime |
| Настройка | 1–2 дня | 2–3 дня |
| Поддержка плагинов | все основные | огромный рынок |
На практике Vite подходит для 80% проектов. Webpack выбираем, если нужны специфические лоадеры (например, для PHP-шаблонизаторов) или глубокая кастомизация.
Что входит в настройку под ключ?
| Этап | Описание | Сроки |
|---|---|---|
| Анализ | Ревью текущей сборки, выявление конфликтов (jQuery, CJSCore) | 1 день |
| Конфигурация | Vite с чанками и прокси, или Webpack с оптимальными лоадерами | 1–2 дня |
| Интеграция | PHP-хелпер для manifest.json, подключение скриптов в шаблоне | 1 день |
| Dev-сервер | Настройка HMR и прокси для локальной разработки | 0.5 дня |
| CI/CD | Автоматическая сборка перед деплоем (GitLab CI / GitHub Actions) | 1 день |
| Обучение | Документация и созвон с командой | 0.5 дня |
Сроки: от 1 дня для простых проектов с одной точкой входа до 5 дней для 10+ SPA-приложений. Стоимость рассчитывается индивидуально.
Мы даём гарантию на совместимость с обновлениями Битрикс на 6 месяцев. Если после очередного patch`а сборка ломается — чиним бесплатно. Опыт 20+ проектов позволяет предвидеть типовые проблемы.
Получите консультацию: мы оценим ваш проект и предложим оптимальный инструмент. Закажите настройку — уложимся в согласованные сроки. Свяжитесь с нами, чтобы обсудить детали.