How to use jQuery efficiently?

[Kryptix]

I want to use jQuery for a few things like centring and popping up an alert box div and possibly a date picker but I hate the idea of having to include lots of different files. Is there a way to include the absolute bare minimum? I'm trying to avoid using jQuery just because of how big the files are to include.

[scootstah]

You can use the minified versions. Minified means all comments, white-space and otherwise unneeded characters/things are removed from the scripts - making their file size smaller.

 

If you can't find a minified version for a particular script or plugin, there's a few web services out there that can minify scripts for you.

[ignace]

1) The best thing to do is load jQuery from a CDN (like: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js). Chances are that the user visited another website that also used the same CDN and thus using the file from cache when visiting your website.

 

2) Use at your own discretion: Have one CSS file with all your CSS rules for all your pages (publicly visible ones) and one JS file with all your JS functions for all your pages (publicly visible ones), minify it, enable gzip on your server, and cache them till the end-of-days (that's till 12-21-2012 12:00:01 as some believe).

 

Pro:

- You have access to every defined function (no need to lazy-load extra JS files when you need access to another set of functions)

- No need to share/duplicate CSS rules between pages

- Subsequent visits use the cached CSS and JS regardless of page

 

Con:

- First-time visit may take a while to load the files

- Too much data can crash the user's browser

[Kryptix]

Thanks, that's really helpful.

 

So I'm including it from Google Code which is fine, and I'm also including a JS file with all my own JS in it. Is it best to merge these to one file and min it or should I keep them separate?

 

Is there a way to compress HTML/CSS/JS on the fly using PHP? Is that a bad idea?

 

If it's a bad idea, is there any programs to minify instantly and like un-minify for dev?

[ignace]

Just like any JS library just create a normal and a minified version. You can control which version is used through something like:

 

PHP

define('USE_MINIFIED', getenv('USE_MINIFIED') ?: true);

 

.htaccess

SetEnv USE_MINIFIED 0

 

In your code:

<script src="<?php print asset('js/script.js'); ?>"></script>

 

function asset($script) {
    $info = pathinfo($script);
    // you can also do other stuff here, like append the last modified time: '.' . filemtime($script)
    return $info['dirname'] . '/' . $info['filename'] . (USE_MINIFIED ? '.min' : '') . '.' . $info['extension'];
}

 

You can download the jar files to compress CSS and JS. Just create a little shell script to minify CSS and JS.

 

JavaScript

http://code.google.com/intl/nl/closure/compiler/

 

JS+CSS

http://developer.yahoo.com/yui/compressor/

 

You can also find a few minifiers for your images online. If you use PageSpeed or YSlow you'll get a few links to online services to minify your images while preserving quality.

[scootstah]

Just keep an unminified version for development. When you go to production minify it. You don't really need it to be minified while you are developing - that's just a PITA.

 

http://jscompress.com/ you can use this site to minifiy javascript.

[casper_ghost]

Just keep an unminified version for development. When you go to production minify it. You don't really need it to be minified while you are developing - that's just a PITA.

 

http://jscompress.com/ you can use this site to minifiy javascript.

 

and don't forget to keep the unminified version for making your changes on a later date