I’ve recently inherited the maintenance of a big, ugly codebase for a production website.
Poke your eyes out ugly. And though it’s big, it’s mostly PHP code, it doesn’t have much JS, besides a few “ajaxy” things in the UI.
Our main current problem is that the site is just too heavy. Homepage weighs in at 1.6 Mb currently, so I’m trying to clean some stuff out.
One of the main wasters is that every single page includes the jQuery UI library, but I don’t think it’s used at all. It’s definitely not being used in the homepage and in most pages, so I want to only include the where necessary.
I’m not really experienced with jQuery, i’m more of a Prototype guy, so I’m wondering. Is there anything I could search for that’d let me know where jQuery UI is being used?
What i’m looking for is “common strings”, component names, etc
For example, if this was scriptaculous, i’d look for things like “Draggable”, “Effect”, etc.
Any suggestions for jQuery UI?
(Of course, if you can think of a more robust way of removing the tag from pages that don’t use it without breaking everything, I’d love to hear about it)
Thanks!!
Daniel
jQuery UI has a standard naming convention, you can view a full list of widgets/effects here. Comparing to that list you’re looking for the corresponding methods mostly:
.draggable().droppable().dialog()However, and this is a big however, if your main goal is to reduce page payload size, this should have no effect. Your users shouldn’t be downloading this every page load, it should be cached on the client as determined by cache headers, additionally your scripts should be minified (already provided version when you download it) and delivered gzipped.
Also if it’s an option, I’d consider using a CDN for both jQuery and jQuery UI, and the stylesheets as well, if you’re using one of the default themes.