Finding usage of jQuery UI in a big ugly codebase

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()
• etc...

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.

---

See this article: https://medium.com/software-developer/finding-jquery-ui-usage-in-a-project-b4fbcfc938c8

It is used for generate big ugly regexp.

I use it as base and got next regexp:

\.\s*(accordion|autocomplete|button|buttonset|datepicker|dialog|menu|progressbar|selectmenu|slider|spinner|tabs|tooltip|effect|switchClass|switchClass|draggable|droppable|mouse|resizable|selectable|sortable|disableSelection|enableSelection|removeUniqueId|scrollParent|uniqueId|zIndex)\s*\(|['"](blind|bounce|clip|drop|explode|fade|fold|highlight|puff|scale|shake|size|slide|transfer|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|easeInQuart|easeOutQuart|easeInOutQuart|easeInQuint|easeOutQuint|easeInOutQuint|easeInExpo|easeOutExpo|easeInOutExpo|easeInSine|easeOutSine|easeInOutSine|easeInCirc|easeOutCirc|easeInOutCirc|easeInElastic|easeOutElastic|easeInOutElastic|easeInBack|easeOutBack|easeInOutBack|easeInBounce|easeOutBounce|easeInOutBounce)['"]|:(data|focusable|tabbable)|\.ui\b

Here can be a lot false positives, but I think it is good start. In any case you need manually check all matches.

---

My advice would be to look at the jQuery UI demo page - http://jqueryui.com/demos/ - and look at each demo and search for the main one or two keywords from each demo, like you would probably do for Scriptaculous. Good luck.

---

I'd suggest doing a search for $(document).ready or trying to figure out the equivalent the codebase uses to check if the DOM is ready for jquery interaction. Because the UI additions require the DOM all the calls for them are going to be within those functions - you can see where they occur and you can check in them for any of common interactions or widgets

---

The library really should account for only 19k of the page size.

But you could search for $(' or $. as most, if not all, jquery calls begin with $.