As a solution to keep things segregated and clean in git, we started developing websites for craft with templates in the template folder, and js, css, etc in a plugin. So each website had our base plugin (standard stuff like font-awesome, foundation, jquery, etc) and their website plugin (any additional libraries and their custom css/js). As an added bonus, our clients could look at the plugin page in the admin panel and see "oh, cool... my website is built by [studio name]!"

To load javascript and css, I used things like:

{% includeJsResource "pluginname/vendor/foundation/bower_components/modernizr/modernizr.js" first %}

We started to notice some significant speed issues.
So I switched to this:

{% includeJsFile "/assets/vendor/foundation/bower_components/modernizr/modernizr.js" first %}

the page loaded SIGNIFICANTLY faster. Like, 3-7 seconds faster. Which is a lifetime on the web. The documentation doesn't appear to make any mention of this.

  • Why is includeJsFile so much faster?

  • Is it possible to use includeJsFile AND keep my resources in the plugin directory?

  • Wow. 3-7 seconds? – carlcs Jan 27 '16 at 1:18
  • 2
    @carlcs That's what I thought as well. 3-7 seconds is insane; the performance hit shouldn't really be noticeable unless you're including a vast amount of files. Must be something else going on here. – Mats Mikkel Rummelhoff Jan 27 '16 at 8:50
  • It was a website that was in progress, so it was including 10-20 js/css files per page on a crappy dev server that is essentially an overloaded shared host. After minifying and combining all the files it would have sped up anyways but... yeah. The performance difference surprised me. Maybe PHP was getting a bigger hit than expected? The key is probably the sheer number of files being included with includeJsResource. – Jonathan Walters Jan 27 '16 at 16:14

includeJsFile links directly to the file. It doesn't try anything fancy, it just finds the file (exactly as you've referred to it) and creates a normal <script> tag for it.

includeJsResource looks for that file in a few different places. It could be a plugin resource, it could be a native Craft resource, etc.

Whenever possible, stick to includeJsFile.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.