Aggregate Assets

Addon by Giovanni Buffa

Aggregate Assets Main Screenshot

Aggregate Javascript and CSS files for better performances.

Aggregate assets for Statamic 3

Aggregate CSS and JavaScript files into one single file for better loading performance.

How to use

After installing the addon, create a new disk in the config/filesystems.php file:

'aggregated' => [
    'driver' => 'local',
    'root' => public_path('aggregated'),
    'url' => '/aggregated',
    'visibility' => 'public',
]

You can customize the root directory according to your needs. The only constraint is that the disc visibility must be publicly visible.

To aggregate files use tags pair {{ aggregate:css }} and {{ aggregate:js }} in your layout.antlers.html file.

For better usage, use Aggregate in conjunction with {{ yield }}:

<!doctype html>
<html lang="{{ site:short_locale }}">
    <head>
        <meta charset="utf-8">
        {{ aggregate:css }}
        {{ yield:css }}
        {{ /aggregate:css }}
    </head>
    <body>
        {{ template_content }}

        {{ aggregate:js }}
        {{ yield:js }}
        {{ /aggregate:js }}
    </body>
</html>

In your blueprint .antlers.html file use as always:

...
{{ section:css }}
<link rel="stylesheet" href="/theme/styles/style1.css" />
<link rel="stylesheet" href="/theme/styles/style2.css" />
{{ /section:css }}

{{ section:js }}


{{ /section:js }}

Remember that the contents of the {{ aggregate }} tags will be replaced with a single CSS or JavaScript tag: insert only locally CSS and JavaScript files.

Finally, remember that aggregation does not rewrite url() within CSS files.