I use a tool (dareboost) that point me the best practice in web development to make sure my website is "well made".

As a critical suggestion, they say that I have to defer my scripts to have a faster page load.

I could do it quite easily using the "defer" attribute for tag, the problem is that I cannot add it for the scripts loaded in the {% scripts %} tag.

It would be great to be able to call it like that :

<script src="{{ ['@scripts']|theme }}"></script>

I could easily add the "defer" instruction that way.

yeah, it true,

but your problem can be solved by {% placeholder %} tag...Maybe, and then wrap the tag for your javascript? Here is another problem that I am wondering now, it's about the inject css file when page init. right now we can use this way to inject our css file, which is good. function onStart() { $this->addCss('assets/css/hello.css'); }

but some time our css code is becoming very large. therefore. some guys want to use scss. then,we need to using gulp to build the css file into that 'assets/css' folder, I am very consumed by this. can we forget gulp? so front-end developer can directly using: $this->addCss('assets/scss/hello.scss'); directly? I genuinely believed this could be done by CMS

Thanks

Last updated 7 years ago

dai.mike16723:

The asset combiner supports SCSS and LESS, but the {% styles %} tag doesn't currently. So, if your SCSS is for your theme and not plugin components, then yes it is possible to include the SCSS files directly into the theme via the asset combiner; but if you're talking about including SCSS files through the use of addCss('') in plugin components, it does not currently.

looking at this question this what I did and for the framework.js and frameworkextras.js I edited the FrameworkNode.php file to the following ->write("echo '<script src=\"'. Request::getBasePath() .'/modules/system/assets/js/framework.js\" defer>'.PHP_EOL;" . PHP_EOL). the only problem with framkework solution is that when you update this file will need to be edited again. hope this helps

In case anyone else comes across this while searching in Google like me, the AssetMaker supports adding attributes to the output, here's the answer:

$this->addJs('source/address/here.js', ['defer']);

This outputs the script with the defer attribute.