Cache javascript failed, because of the use of external javascript

Question

I've use YSlow to check the load-speed of my web. According to the rule, it is better to have one big external javascript rather than many external javascripts. It is written in the rule that using a lot of external javascript will cause a lot of http request which is not good.

I'm using CKEditor, and I want to combine it with other javascripts into a big external javascript. But, everytime I load it, there is always errors ocured. After read the code, I think I know why is it happens.

if ( CKEDITOR.loader )
CKEDITOR.loader.load( 'core/ckeditor' );
else
{
    // Set the script name to be loaded by the loader.
    CKEDITOR._autoLoad = 'core/ckeditor';

    // Include the loader script.
    if ( document.body && (!document.readyState || document.readyState == 'complete') )
    {
        var script = document.createElement( 'script' );
        script.type = 'text/javascript';
        script.src = CKEDITOR.getUrl( '_source/core/loader.js' );
        document.body.appendChild( script );
    }
    else
    {
        document.write(
        '<script type="text/javascript" src="' + CKEDITOR.getUrl( '_source/core/loader.js' ) + '"></script>' );
    }
 }

CK Editor seems to load other external javascript which has location relative to it. Moving the script into other file will surely cause an error.

So, my question is: Is there any general work-around for this? I mean, it might be other scripts with such a behavior (not only CK-Editor).

EDIT: I think using head.js (http://headjs.com/) is the best options here

One large file isn't always best - read this: headjs.com/#theory — Sam Dufel
– Sam Dufel, Commented Aug 31, 2012 at 0:52
Once the JS files are properly cached, and assuming they're placed at the bottom of the body as they should, end-users won't see any significant change in load speed for 1 vs 3-4 scripts - modern browsers can load scripts in parallel and will only fetch a 304 response from the server. — Fabrício Matté
– Fabrício Matté, Commented Aug 31, 2012 at 0:53
Not saying whether is relevant or not, but try putting yourself at your visitors' place -- disable caching and Ctrl+F5 your page on multiple browsers, then check if the loading time actually improves after joining all your JS files. Obviously, for the first load, minified files do have a visible advantage (if your JS files are HUGE), but after the first load it isn't much relevant -- unless of course the user has completely disabled caching, but then it's a rare corner-case and s/he is either used to slow page loading times or has a fast enough connection that makes loading time irrelevant. — Fabrício Matté
– Fabrício Matté, Commented Aug 31, 2012 at 1:44

N. Taylor Mullen · Accepted Answer · 2012-08-31 01:33:16Z

1

When trying to load all JavaScripts at once dynamically usually you'll encounter dependancy issues or library conflict issues.

Examples: Dependancy Issues - Requiring a file that needs jQuery before jQuery has been loaded. Conflict Issues - When working on large scale products you may end up encountering conflicting libraries. For instance loading two files with the same library name but different functionality.

If you're truly seeing a lot of slow down and want to combine all of your JS files set dependencies in your file combination code. A simplified example of this is creating an array of libraries that are loaded prior to any main JS pieces.

Hope this helps in resolving your issue!

answered Aug 31, 2012 at 1:33

N. Taylor Mullen

18.3k6 gold badges51 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

goFrendiAsgard Over a year ago

that is exactly what happens to me. But I've make a library for it, so that it will only make the cache in the very first time. Head.js is a good solution so far

Robyflc · Accepted Answer · 2012-08-31 03:20:01Z

0

Well, I don't know which server language you're using but, in case it's PHP, I suggest you to try Smartoptimizer for your concatenation/minification issues.

Using it, you just add your js as you would and it takes care of processing them. Nowadays, I'm using it with YepNope and I believe it would work with HeadJS too.

answered Aug 31, 2012 at 3:20

Robyflc

1,20911 silver badges16 bronze badges

1 Comment

goFrendiAsgard Over a year ago

Let me try it. I don't sure that any library can deal with ck-editor case. As you can see in my explanation, this is likely not a usual case. Thank you for point out YepNope !!!

Collectives™ on Stack Overflow

Cache javascript failed, because of the use of external javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related