0

I have made a construction to defer loading javascript to speed up page loading. To deploy websites i use the YIU compressor to minimize the scripts, also for speed. There will be two versions of the scripts, one is compressed and orginal one is not. For example: example-min.js and example.js. Some javascripts will be loaded only when a functionality comes in and sometimes it needs more scripts (plugin idea).

Anyway, i want to know (if other js files are needed) if the 'host' js file is compressed, so when it is compressed it loads the minified version of the js file. If not (when developing) it loads the orginial file.

For example:

function myObject()
{
var o = this;

o.isJsMinified = function()
{ s =  o.isJsMinified.toString(),ss='s=  '; 
  return (s.indexOf(ss+'o.is')<0);
};

o.require = function( s, delay, baSync, fCallback ) // add script to dom
{
 var oo = document.createElement('script'),
 oHead = document.getElementsByTagName('head')[0],
 f = (typeof fCallback == 'function')?fCallback:function(){};
 if( !oHead )
  { return false; }
 oo.onload = function() {oo.id='loaded'; f(oo); };
 oo.type = 'text/javascript';
 oo.async = (typeof baSync == 'boolean')?baSync:false;
 oo.src = s;
 setTimeout( function() { oHead.appendChild(oo); }, (typeof delay != 'number')?delay:1 );  
 return true;
};

.....
.....

if( <new functionality found> )
{
  if( o.isJsMinified() )
   { o.require('new-min.js',800); }
  else { o.require('new.js',800); }
}

.....
.....

}

When you look at the jsIsMinified() function i use a trick to detect if the function itself (the source) is stripped from spaces (minified version). But, there is a problem with firefox, it does not return the original formatting so it cannot detect any difference.

For example: // compressed by YUI compressor:

o.isJsMinified=function(){s=o.isJsMinified.toString(),ss='s=  ';return (s.indexOf(ss+'o.is')<0);};

Firefox will display:

function () {
    s = o.isJsMinified.toString(), ss = "s= ";
    return s.indexOf(ss + "o.is") < 0;
}

The function fails in firefox, it always 'says' it is not compressed. Does anybody know a work-around for this?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Codebeat
  • 6,501
  • 6
  • 57
  • 99

2 Answers2

1

I really think you overcomplicate things here. Woah, why don't you just create two folders on your server like js/production and js/debug. You might have one flag within your javascript files that could indicate whether or not it's productive or debug. Like

if( window.DEBUG ) {
    o.require('/js/debug/new.js',800);
}
else {
    o.require('/js/production/new.js',800);
}

thinking about that, even those folders are unnecessary. You can just distinguish between .min or not. The only thing you really need to do is to set a global DEBUG variable in your code.

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • i am not overcomplicate things, maybe in the example i show i will. I understand what you are saying. But i don't want to flag things with debug or something. – Codebeat Aug 03 '11 at 16:56
  • @Erwinus: the problem is, you can't reliably determine whether or not a script file was compressed or not. I mean, of course you can try to spot things which are very typicall for a compressed file, or even watchout for some kind of "comment" a compressor leaves in the file, but pretty pretty unreliable. – jAndy Aug 03 '11 at 17:05
  • Also it is working great in other browsers. The problem is firefox. Function.toString() returns formatted text instead of 'as-is'. – Codebeat Aug 03 '11 at 17:07
  • Why it is unreliable? I always use the same compressor and with the same results. You cannot use comments because it will be stripped amd that is not what i try to compare. – Codebeat Aug 03 '11 at 17:12
  • And in no case it will fail except that it will load the uncompressed file. – Codebeat Aug 03 '11 at 17:14
  • Also when you use the debug thing you describe, all scripts are minified or not so it is difficult to 'play'/test other cases. That is what i hate about flagging things. It is difficult to maintain. – Codebeat Aug 03 '11 at 17:29
  • @Erwinus: try `.toSource()` instead of `.toString()` in FF then. – jAndy Aug 03 '11 at 17:30
  • Thank you, but doesn't help. When i specify s='test'; in the function the output will be shown as s = 'test;, it still formats the source. – Codebeat Aug 03 '11 at 17:57
0

The HTTP headers will specify whether compression was requested and enabled, but there's no easy way to read them so you might want a special Firefox extension for development.

Perhaps the right place to make the change is in the server, send the non-minified script out if a certain header is given (and the requestor IP address is local).

Community
  • 1
  • 1
spraff
  • 32,570
  • 22
  • 121
  • 229