kasparsd / minit

A WordPress plugin to combine CSS and Javascript files.
GNU General Public License v2.0
286 stars 46 forks source link

Exclude Jquery works but it's still loaded asynchronously? #21

Closed schilke closed 10 years ago

schilke commented 10 years ago

I'm probably messing up or missing something important, but excluding Jquery like that

function exclude_my_file( $exclude ) {
    $exclude[] = 'jquery';

    return $exclude;
}

add_filter( 'minit-exclude-js', 'exclude_my_file' );

seems to fail (partly). I can load Jquery in head, that works without excluding (I guess minit doesn't touch it then?) but when I specify to load in the footer by

wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '', true );

it's async'd all the time... (with and without excluding) Could this be an issue of my hack to dequeue the native WP Jquery and enqueue'ing Google's CDN version? If yes: is there a way around it?

BTW: Great plugin! I really love smart, fast & tiny solutions :)

kasparsd commented 10 years ago

Where do you have the minit-exclude-js filter @schilke? Is it in a theme or a plugin? Is it within another hook?

kasparsd commented 10 years ago

I think there might be another script which has jQuery as a dependancy so it will always load it.

schilke commented 10 years ago

The filter is in the theme's function.php and works fine for everything else (Javascript and CSS) and yes, there are scripts that have jQuery as a dependancy - but everything goes over the WP enqueue system. As you might probably guess I'm not a Javascript expert, so I'm not sure if I fully understand what you mean with "always load it" but if I deactivate Minit, jQuery is loaded without async - that's definitely done by Minit - if I'm not totally stupid :)

schilke commented 10 years ago

Been too fast with the send button, I guess you mean there are dependancies of those scripts Minit combines, so it will automatically include jQuery, too? To speak in more detail: I have a custom gallery script (based on galleria.io) which needs jQuery to work (obviously) - so I've been testing what I could safely combine and ended up with excluding either the galleria.io main script and the "themes" script (which does the customizing) and I've noticed that it wouldn't work with jQuery loaded asynchronously - it works without problems when I load jQuery in head - but I want the minimum overhead by at least loading it in the footer - so I've excluded jQuery but when I specify the footer it gets async'd.

schilke commented 10 years ago

BTW: Both of the other included scripts aren't loaded asynchronously - should they? (because the problem might be something else, then...?)

kasparsd commented 10 years ago

Minit will try to load the script asynchronously only if it is on an external resource (domains don't match).

I guess you would be better off by using the version of jQuery that comes with WordPress which will be included in the combined file and not loaded asynchronously.

schilke commented 10 years ago

I see. Well I probably have to stick my head again into all the load dependencies because I've noticed that galleria.io won't load at all if it's combined - no matter if jQuery is local, from Google, asynchronous or not - and no matter if I exclude only 1, 2 or all three JS files (galleria, theme file, init), I've already tried a lot with no success yet. So in general there's not an easy way to avoid Minit's async'ing of an external .js when it's loaded in the footer? BTW: I assume you load Google fonts with Minit, too, on your site? Just out of curiousity: Do you think that method is better than @scottjehl's loadCSS ?

kasparsd commented 10 years ago

Minit should exclude a file from being combined if it's being excluded via the filters. I will have to check what happens with js and async logic with regards to exclusions.

I am using the web font loader for loading Google fonts.

Regarding async CSS -- I don't see why that would be necessary when loading only one combined CSS file.

kasparsd commented 10 years ago

What is the URL of the site where you're having these issues @schilke?

schilke commented 10 years ago

Oh yes, I know that you're using the web font loader (else it would be css instead of js and I guess only js will be loaded asynchronously - right?). I just wanted to know if you're using it this way or do something else there ;) thx. Regarding the URL: Sorry that's a dev server but if you really need to see that in action you could tell me which settings I should use. I'll set that up, and shoot you an email with the address and a password ;) The async loading of jQuery is definitely done by Minit even if I exclude it by filter. As soon as I define loading in footer it's loaded async - despite the filter.

schilke commented 10 years ago

And yes, you're right, of course: Loading one CSS file asynchronously doesn't make any sense - but I have 3 at the moment (Combined styles, Font Awesome by CDN and Google Fonts)

kasparsd commented 10 years ago

@schilke Could you please try the latest version 1.0 to see if it fixes the issue.

schilke commented 10 years ago

Thanks for the update :) However, I'm afraid, I'm getting really strange results now - still investigating if I'm probably missing something important... I enqueue jQuery like so

    //Load jQuery from google
    function use_google_jquery() {
    if (!is_admin()) {

        wp_deregister_script('jquery');
        wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '', true );
        wp_enqueue_script('jquery');

        }
    }
    add_action('init', 'use_google_jquery');

And I have this filter

function exclude_my_file( $exclude ) {

    // ID of the script that was enqueued
    $exclude[] = 'jquery';
    $exclude[] = 'galleria-init';
    $exclude[] = 'ie-only'; 
    $exclude[] = 'galleria-js';
    $exclude[] = 'galleria-theme';

    return $exclude;
}
add_filter( 'minit-exclude-js', 'exclude_my_file' );

The result is really strange: Now I have jQuery twice in footer, one async'ed & one regular Nothing changes if I comment out the filter. If I set loading jQuery in footer to 'false': I get one async'ed in footer and one regular in head (FYI I've disabled the WP jQuery lib completely for debugging, so there can't be a conflict) Does the jQuery dependency of other scripts interfere here? I'm baffled...