Including large JS library with :cache => true into a rails app

Question

Hi,

I am thinking about the best way of including a JS library into rails app supporting :cache => true option for both JS and CSS.

Let me take an example to describe the question: jQueryUI (that's just an example). It usually has the following structure when downloaded:

+jq.ui
    +css
       +skin1
         +images
             all_the_images.png 
        jq-ui.css
       +skin2
         +images
             all_the_images.png 
        jq-ui.css
    +js
        jquery.js
        jq.ui.js

Now in order to use it I have to include this structure into rails app (2 js files + 1-2 css). I need to be able to use :cache => true option (so that the jquery, jquery ui, application.js etc would be all in one file; also the jq.ui/skin2/jq-ui.css and application.css would be in a single file too).

The problem with :cache => true is that the single (combined) CSS file will not reference the correct images as it will be moved to the stylesheets path instead of stylesheets/jq.ui.css/skin2/jq-ui.css. Thus broken links to images from the CSS.

The question is:
Where the library like this should go in to the rails app? Should I reshuffle the structure to the default rails convention (and thus manually modify jquery ui css to fix image references) or use it as it is and combine all the files some other way?

Thanks,
Dmitriy.

Answer 1

Is there a specific reason why you need to combine them? I understand that it means more requests to your webserver, but the results will be cached. You might also want to consider using a version of jquery that's served off of the google CDN.

Alternatively if you must combine them into one file then I suggest flattening the directory structure and/or using absolute paths to your resources. The problem with this is that you'll need to be careful when updating to new version of your third party libraries as it will involve editing the libraries.

I personally use sprokets for managing my JS dependencies (instead of :cache => true), but it also won't help you with this use case. Even so, you might want to consider taking a look if you're going to have a lot of javascript.

Answer 2

If I really wanted to keep the directory structure of the jquery ui skins together, I would just exclude those css files from being cached into 1 file. Say you had 2 other css files outside of jquery ui:

stylesheet_link_tag "css-file1", "css-file2", :cache => "main"

I would just cache those and keep skins packaged with jquery ui, even if they don't get combined into a single file. I would probably do this because if a skin or a skin image got updated I would just want to be able to drop in and replace it to update it, rather than deal with restructuring directories or modifying css/js files that came with it. It's too error prone and not worth the benefit of saving 2 extra http requests.