Ви відкриваєте сторінку каталогу, а бандл 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 місяців. Якщо після чергового пачу збірка ламається — лагодимо безплатно. Досвід 20+ проєктів дозволяє передбачати типові проблеми.
Отримайте консультацію: ми оцінимо ваш проєкт та запропонуємо оптимальний інструмент. Замовте налаштування — вкладемося в узгоджені терміни. Зв'яжіться з нами, щоб обговорити деталі.