Question 1

Why does bundling CSS and JS speed up the site?

Accepted Answer

Browsers limit concurrent connections per domain (usually 6). Many files cause sequential loading. Bundling reduces the number of requests, especially beneficial on mobile networks. It also lowers DNS, TCP, and TLS overhead per request.

Question 2

What built-in tools does Bitrix offer for file bundling?

Accepted Answer

Bitrix has built-in minification and bundling via performance settings. Files registered through CMain::AddCSSLink() and AddHeadScript() are grouped into one CSS and one JS bundle. However, inline code in templates or components is not automatically bundled.

Question 3

How to handle inline styles and scripts generated by components?

Accepted Answer

For custom components, rewrite style and script output using the API: replace echo '<style>' with $this->addExternalCSS() specifying the file. This allows Bitrix to include them in the common package and apply caching.

Question 4

What if the style order breaks after bundling?

Accepted Answer

CSS order is critical for specificity. Use the third parameter of addCSS() to explicitly set priorities. Separate base styles (loaded first) from component styles. Alternatively, use two bundles: critical and deferred.

Question 5

How to set up Vite for use with Bitrix?

Accepted Answer

Vite builds files from src/ to dist/. In header.php, include the built bundles via CMain::AddCSSLink() and AddHeadScript(). Vite supports HMR for faster development. For production, use a standard build. Ensure files already bundled by the built-in mechanism are excluded from the Vite build.

CSS and JS Bundling in 1C-Bitrix: Speed Up Loading

Our competencies: