When you work with a lot of separate scripts that have to be updated
regularly you might find it easier to add them together autmatically
(instead of manually each time).I wouldn't use a JS compressor, on each page
load the entire document is parsed again and that can be a significant
overhead on the page load. Use GZIP instead, it is much faster and the size
is ok.
My solution is a simple PHP script that serves the JS. I have a folder named
'scripts' with a lot of .js files and a single index.php.
You just add: <script type="text/javascript" src="scripts/"></script>
The PHP code looks something like this:
// WARNING: GZIP causes problems in IE6 when manually enabled. Just let
the ob_gzhandler handle it.
ob_start("ob_gzhandler");
// Read JS
$modified = 0; $data = "";
foreach(glob("*.js") as $script) {
// Read script
$data .= "\n\n\n/* SCRIPT: $script */\n\n\n";
$data .= "try {\n";
$scriptdata = file_get_contents($script);
$data .= $scriptdata;
$data .= "} catch (e) { alert(\"Javascript error in $script: \" +
e.name+ \" - \" + e.message); }\n";
$modified = max(filemtime($script), $modified);
// Add info to header
$scripts[$lines] = $script;
$lines += substr_count($scriptdata, "\n") + 8; // Add extra lines (6 + 2
for JS)
}
// Headers
$ETag = '"' . md5($_SERVER['REQUEST_URI'] . $modified) . '"';
header('Content-type: atext/javascript'); // use '' for compatibility,
application/x-javascript is not for every browser
header("Content-Disposition: inline; filename=script.js"); // Helps IE
cache the file!!!
header("Cache-Control: public");
header("Cache-Control: max-age=123456");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 123456) . " GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s", $modified) . " GMT");
header("ETag: $ETag");
// Output
echo $data;
// End
ob_end_flush();
You might have to change the headers a bit, and since i've cleaned it up a
little I don't know if it's all perfect, but this is the general idea.
The advantage is that the JS file is loaded in one chunk with GZIP encoding
and is cached in all browsers (even in IE6). This is not as easy to achieve
as you might think, all headers used for caching are different per browser!
When you modify one of the files the last modified is also updated. In my
own script I also check the Etag and return a 304 when it's the same, this
also helps a lot!
You can also add a lot of nice dynamic info with this, I have an index in
the beginning with the lines where the different scripts start (easier to
help debug), and some dynamic settings are added to the JS, like a login
timeout warning etc.
I hope this example can be of some use to you.
Regards,
THD
On Thu, Jul 2, 2009 at 2:51 AM, Dave Methvin <dave.meth...@gmail.com> wrote:
>
> In the simplest case, you should be able to download jsmin and run it
> from a command line.
>
> http://www.crockford.com/javascript/jsmin.html
>
> jsmin.exe <first.js >minified.js "// Copyright (c) 2009 You and
> Others"
> jsmin.exe <second.js >>minified.js
> jsmin.exe <third.js >>minified.js
>
> Then include minified.js in your pages.
>
> YUI Compressor does a better job, but the setup is a bit more complex:
>
> http://developer.yahoo.com/yui/compressor/
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
