Asset Caching in 5.7

Permalink
I didn't fully understand how the asset management worked in 5.7. Since I always have CSS and JavaScript Cache turned off in concrete5 5.7 during development - my code was littered with bits of CSS and JS. After enabling CSS and JavaScript Cache, I got to see that it does a very good job of cleaning it all up.

The cache system combines and minifies files into a new file with a data-source tag that lists the source files used. To use the cache system, you need to tell it what files to use. For custom block templates, it appears that they are automatically combined and minified without being registered.
http://www.concrete5.org/documentation/5.7/developers/themes/regist...

If you care about site performance, you will want to combine (reduce HTTP requests) and minify (reduce file size) files. Also, if you aren't using gzip - run, don't walk, to your server and enable it.
https://developers.google.com/web/fundamentals/performance/optimizin...

In seeing how it worked, I used a custom block template for the search block. It used a view.css, two SVG images used as backgrounds, and three JavaScript files.
- view.php
- view.css
- images folder with 2 images
- js folder with 3 javascript files

Javascript Files

Example: js without asset caching
<script type="text/javascript" src="/concrete5/concrete/js/legacy.js"></script>
<script type="text/javascript" src="/concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.js"></script>
<script type="text/javascript" src="/concrete5/application/blocks/search/templates/slide_out/js/1_classie.js"></script>
<script type="text/javascript" src="/concrete5/application/blocks/search/templates/slide_out/js/2_uisearch.js"></script>
<script type="text/javascript" src="/concrete5/application/blocks/search/templates/slide_out/js/3_activate.js"></script>
<script type="text/javascript" src="/concrete5/concrete/blocks/image_slider/view.js"></script>


Example: js with asset caching - now one file
<script type="text/javascript" src="/concrete5/application/files/cache/js/77516de1e4832bc4bde77006fea16880f6573b5b.js" data-source="/concrete5/concrete/js/legacy.js /concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.js /concrete5/application/blocks/search/templates/slide_out/js/1_classie.js /concrete5/application/blocks/search/templates/slide_out/js/2_uisearch.js /concrete5/application/blocks/search/templates/slide_out/js/3_activate.js /concrete5/concrete/blocks/image_slider/view.js"></script>



CSS files

Example: css without asset caching
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.css"></link>
<link rel="stylesheet" type="text/css" href="/concrete5/application/blocks/search/templates/slide_out/view.css"></link>
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/image_slider/view.css"></link>
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/page_list/templates/thumbnail_grid/view.css"></link>
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/page_list/view.css"></link>


Example: css with asset caching - now one file
<link rel="stylesheet" type="text/css" href="/concrete5/application/files/cache/css/076317fea1f5bb374d099bd023970f2c80ee3ddf.css" data-source="/concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.css /concrete5/application/blocks/search/templates/slide_out/view.css /concrete5/concrete/blocks/image_slider/view.css /concrete5/concrete/blocks/page_list/templates/thumbnail_grid/view.css /concrete5/concrete/blocks/page_list/view.css"></link>

MrKDilkington
View Replies:
andrew replied on at Permalink Reply
andrew
Thanks for taking the time to write this post.