I want to not load plugins for pages that don't need them.

I want to not load plugins for pages that don't need them.

Yeah, that's an awkward sounding title, but it's the only way I could think to word it.

The context

I have a site with a bunch of pages. Most pages have some kind of jquery-enabled behaviour. Some don't. Some pages require the loading of plugins. Not all pages require the same plugins.

The Problem

I have a working, single js script for all the behaviours across my site.
The browser loads a page. A plugin, say fancybox, is not required for that particular page. It is, however, required for another page on my site.

The browser console flags an error: fancybox, called by my script for its use on other pages, is not present.
Therefore "$(something).fancybox is not a function"
This probably also means that my single file will stop running on that page.

I guess I could include the plugin for loading on that page. That eliminates my error. But it means an unneccessary http request and loading time. Of course, that could be helpful if this page is the first page that the visitor hits before moving on to a gallery page where fancybox is required.

I guess I could also break up my single behaviours file into seperate files for similar pages. Similar in terms of their requirements. That lightens the loading time and eliminates the error, but adds another level of complexity to maintainance. It's not really scalable.

What do you guys do?