Combining files to have only a single call for all CSS files with Assetic on Symfony 2

Question

I'm using assetic on Symfony 2 and I compress all my CSS and JS files thanks to YUI. ALL works perfectly, but on prod environment, I have multiple calls to load every compressed files. In fact, I thought that assetic could combine all CSS files (and JS files) to have just a single call to a unique file (one for CSS, another one for JS), and that for each page, is it possible ?

I don't find documentation about it ... Have an idea ? Thanks !

Answer 1

Like describe in the documentation, you can also combine several files into one. This helps to reduce the number of HTTP requests, which is great for front end performance.

You just have to use this syntax :

{% javascripts
    '@AcmeFooBundle/Resources/public/js/*'
    '@AcmeBarBundle/Resources/public/js/form.js'
    '@AcmeBarBundle/Resources/public/js/calendar.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

Answer 2

For combining css files into one in dev environment

php app/console cache:clear --env=dev --no-debug

To see the combined file served when the page is requested

// app_dev.php
$kernel = new AppKernel('dev', false); 
// Setting the second parameter to false turns of debugging

Ensure you are combining assets

{% javascripts
    '@AcmeFooBundle/Resources/public/js/*'
    '@AcmeBarBundle/Resources/public/js/form.js'
    '@AcmeBarBundle/Resources/public/js/calendar.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

Same follows for production environment