4

I want to combine little javascript files while keeping other script's dependencies for them. Is there any way?


Details:

New version of BuddyPress enqueue 6-7 little javascripts:

// Legacy
'bp-confirm',
'bp-widget-members',
'bp-jquery-query',
'bp-jquery-cookie',
// 2.1
'jquery-caret',
'jquery-atwho'

For example bp-confirm is just a 1 line script:

jQuery(document).ready(function(){jQuery("a.confirm").click(function(){return confirm(BP_Confirm.are_you_sure)?!0:!1})});

This is just insane. I want to combine those but sadly some other javascript enqueue have dependency on those little js files. I couldnt think a solution for it. Any ideas?

4
+50

From your comment above I read

This is one of the reason why i am looking for a way to say to wordpress: "hey, i added those js files, dont worry". This is whole purpose of this question

I think is perfectly fair, I +1ed your Q but the problem is that way does not exists, or better does not exists a clean, canonical way.

How To

  1. first of all you have to look at all the dependencies of the 7 scripts and take note of that for future usage
  2. create a single combined js file for all the 7 scripts
  3. hook wp_print_scripts with a late priority, probably PHP_INT_MAX, and inside hooked callback, check if BuddyPress is installed and activated and if so:
    1. dequeue the 7 scripts
    2. enqueue your single script, using as dependencies for it all the dependencies of the 7 files (the ones you discovered at point #1)

Doing so WordPress will add your single script (that contains the 7 scripts) and all the dependencies needed and everything works.

If a third party BuddyPress plugin will add a script using one of the BP scripts as dependency, e.g.

add_action( 'wp_enqueue_scripts', function() {

  wp_enqueue_script( 'thirdparty-bp-script', $js_url, array( 'bp-jquery-query' ) );

} );

everything will work, because this script run on 'wp_enqueue_scripts', and at that time BP script used as dependency is enqueued, so WordPress will not add it again.

Problems

What can be wrong with this workflow? I think nothing with the workflow itself, but if you want to use this script for a theme to be shared or to be sold, I really want to discourage you to do that.

The reason is that BP scripts have probably changed in various versions of plugin, while maintaining the script handle. So you would need to go back in BuddyPress history, look at that scripts line by line and add different versions of your combined script for every BP version, and enqueue the right script by checking version of BP installed.

Of course scripts may change in future, or some new scripts may be addeed, so again on every BP release, even minor ones, you need to check the scripts nad their dependencies and add a new version of your script if needed. As you can understand this becomes hard to maintain, and you can bet there will be issues for your users.

IMHO this kind of optimizations, even if required in any WordPress installation where performance is important (all?) should be implemented by site owner, in your case by people that will install your theme, not by theme developer.

As example, what about someone may want to combine all the js enqueued in the site, not only the onces used in your theme, and use a CDN for it?

In conclusion, if you want to do that for your own site, follow my steps, it should work, but if you plan to share/sell your theme, leave things as they are.

If you care, you can add a section in your theme docs where explain how to combine scripts for better performance, and let your users choose if do that or not.

| improve this answer | |
1

In my honest opinion, I would not do that.

PRO'S and CON's

PRO'S There are really not any pro's here, except for having a couple of files fewer. I don't even think that you are going to gain any significant load time at all combining these files

CON'S

There are many concerns here

  • You should not make direct changes to buddypress files. You will loose whatever you have done when you upgrade

  • This means you have to create a child theme or yet another plugin to deregister and dequeue theses scripts after they have already loaded successfully, then create a new js file with all the code and enqueue that.

  • Unnecessary loading of scripts that is not needed. I believe there was a method to the madness in creating the amount of js files by the buddypress authors. I don't know the inner workings of buddypress, but my logical mind tells me that this was done due to conditional loading

  • Combining all these scripts might break other things, like you said, dependencies. You might even end up with unexpected behaviour on some pages

  • Front end and back end scripts are loaded differently, so scripts for back end and front end should not be mixed.

I do think that there are aspects that I have missed, but these are the very basic main points. I would really rethink this whole process, and would start of by contacting the buddypress authors with the following questions

  • Why the amount of js files, is this done for the fact of conditional loading, scripts for front end and back end etc

  • Is it possible to combine these scripts in future releases of buddypress if there is no aparent reason for the amount of single js files

| improve this answer | |
  • Btw i am theme writer and here is my theme: wordpress.org/themes/firmasite I combined those for frondend and only 1 js have dependency on them (mentions.js) which i enqueue again.. Main point is, yes its bad but 6 empty file queue is bad too. I am trying my best to reduce files. This is why i am looking for a way to tell to wordpress: "hey, i added those js files, dont worry" – Ünsal Korkmaz Sep 22 '14 at 14:37
  • But why, if you are a theme writer, and writing a theme, why do you want to include buddypress files in your theme. My point is, those files are part of buddypress, and that is where they must stay. I see absolutely no use glogging up my theme with files from a plugin – Pieter Goosen Sep 22 '14 at 14:46
  • Minimum file calls are standard approach in my opinion and i can understand your concern on this. This is one of the reason why i am looking for a way to say to wordpress: "hey, i added those js files, dont worry". This is whole purpose of this question. – Ünsal Korkmaz Sep 22 '14 at 18:41
  • Messing around with core and/or plugin scripts and styles is the first thing I look for to NOT use a theme. Please, even for the sake of reducing file calls, do not do this. Every single time you want to update BuddyPress you now have to manually go in and verify that your combined files contain all the changes in that version. – hereswhatidid Sep 23 '14 at 15:46
1

Why don't you just de-Register those handles to 6 different files, and re-register those handles to one combined file?

I think if you have 6 different handles, pointing to one file, WordPress will enque this file just once.

So you can guarantee that your dependencies dont break up.

Is this an possible solution for you?

| improve this answer | |

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.