Vite vs Webpack for Vue.js in 1C-Bitrix: Build Setup Guide

You open a catalog page, and the Vue.js bundle weighs 800 KB — the browser freezes for 5 seconds. This happens when Bitrix out of the box cannot handle modern frontend: .vue files are not compiled, imports are not resolved, and jQuery from CJSCore starts conflicting with the virtual DOM. Proper build solves everything: HMR, tree-shaking, chunk splitting, lazy loading, and no conflicts.

We have been configuring Vue.js builds for Bitrix for many years and have completed over 20 projects. In this article, we'll examine how to choose between Vite and Webpack, and provide a ready production configuration. Typical investment for such setup ranges from $500 to $2000 depending on complexity, with average savings of 30% in development time.

Why do you need a dedicated bundler for Vue.js in Bitrix?

Bitrix uses a classic approach: scripts are included via Asset::getInstance()->addJs(), cached and versioned through BX.htmlspecialchars (for static files without a hash). But the ES module system, .vue single-file components, and tree-shaking require a bundler. Without it, you get:

• Global scope — conflicts between window.Vue and BX.Vue
• No HMR — every change forces F5
• Giant bundles — all code in one file without chunk splitting

How does Vite speed up development?

Vite provides instant startup: a dev server with HMR that uses native ESM and ESBuild for dependency pre-bundling, fast production builds via Rollup, and built-in TypeScript. For Bitrix, this means you edit a .vue component and changes appear in real time without F5. Vue 3 Bitrix projects benefit from better performance. According to our measurements, development on Vite is 5 times faster than on Webpack, and the final bundle is 30% smaller due to tree-shaking. Wikipedia notes that Vite is a modern standard.

Case in point: on a project with a catalog of 50,000 products, we configured Vite with chunk splitting — the main page load dropped from 8 to 2 seconds. Such a result is impossible without a bundler.

Basic Vite configuration with chunk splitting and lazy loading via dynamic import():

// 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 integration via manifest.json — the only way to ensure correct hashed files after each deployment. Bitrix tagged cache with manifest.json ensures correct asset versioning:

// 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']; } // In template \Bitrix\Main\Page\Asset::getInstance()->addJs(viteAsset('catalog/main.js')); 

How to set up Vite dev server with proxy to Bitrix?

1. Install Vite and the Vue plugin: npm create vite@latest -- --template vue in the local/vue-src folder.
2. Create vite.config.js with root, entry points, and aliases (as in the example above).
3. Configure proxy for requests to Bitrix:

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

4. Add a PHP helper viteAsset() for production and dev mode with module scripts.
5. Run npm run build — the build is ready.

When should you choose Webpack?

If the project already uses Laravel Mix or the team is deeply familiar with Webpack, it remains a viable option. But note: dev build is 3–5 times slower than Vite. The configuration is simpler:

// webpack.config.js for Bitrix 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()], }; 

Comparison of Vite and Webpack for Bitrix:

In practice, Vite is suitable for 80% of projects. We choose Webpack if specific loaders are needed (e.g., for PHP template engines) or deep customization.

What is included in turnkey setup?

Timeline: from 1 day for simple projects with a single entry point to 5 days for 10+ SPA applications. Pricing is determined individually.

We provide a 6-month compatibility guarantee with Bitrix updates. If the build breaks after a patch, we fix it for free. Our experience with 20+ projects allows us to anticipate typical issues.

Get a consultation: we evaluate your project and recommend the optimal tool. Order the setup and we'll meet the agreed timeline. Contact us to discuss the details.