This is a page with a slider plugin. The slick slider plugin is encapsulated in its own little template, which was included on this page like this:

<div class="col-md-6">
	<F3:set slides="{{ array('Great.','Awesome.','Yeees!') }}" />
	<F3:include href="templates/slider.html" with="slides={{@slides}}" />
</div>

The interesting part happens in the slider.html file, where the assets were defined, that are needed for this frontend widget.

<F3:asset src="plugin/slick/slick.js" slot="slick"/>
<F3:asset src="plugin/slick/slick.css" slot="slick" />
<F3:asset src="plugin/slick/slick-theme.css" slot="slick" />
<div class="slider">
	<F3:repeat group="{{@slides}}" value="{{@text}}" counter="{{@i}}">
		<div>
			<div class="inner">
				<h3>Slide {{ @i }}</h3>
				<p>{{ @text }}</p>
			</div>
		</div>
	</F3:repeat>
</div>

That way, the required JS and CSS files are only loaded on this page. Even if you include that sub-template multiple times, the asset dependencies are only included once.

If you check the source of this page, you will also notice that these widget assets were not merged into the big global CSS or JS file, but handled separately.

<script src="ui-assets/compressed/23qgaq95tzy8w.js?1478472403"></script>
<script src="ui-assets/compressed/2zzcd4valpc08.js?1478472403"></script>

This is possible when you add a custom combine slot attribute to the assets. All internal files within a slot are combined into one individual file.

It's also possible by adjusting the configuration. When you want to skip all files from merging within the ui/plugin/ directory, you can set this to ASSETS.combine.exclude.

It has the advantage that the big global combined file will not change from page to page, which could cause redundant loading of your assets content.

---