Should I download all JQuery UI JS / CSS or just the parts that I need on a particular page?

Question

I know what many of you will say. This is a stupid question, or maybe this is not the right forum or application dependent, etc.

I'm just wondering if I have a special theme that I can change in the future, it is a good idea to separate the jQuery user interface, I mean the JS and CSS classes in small fragments (files such as droppable, etc.), and include only the ones I need on a particular page, or save them together and load the entire user interface on each page. Both have positive and negative sides. I'm just not sure which is better.

What is your opinion. Is any other approach possible?

Answer 1

My personal opinion is that if you want to keep up to date in the future, it would be much easier to keep jQuery UI files complete , otherwise in the future you will have to spend time updating to separate new versions.

If there are functions, you know that you will not and will not , you can delete them during download by simply selecting the functions that you will use.

I also think that the loading time would be insignificant, as soon as the browser has loaded the script, it will most likely cache its copy so that the user does not reload the script from each page. In addition, the server should only serve two files, instead of the overhead that can serve multiple files.

It will also help in the future development of your site’s scripts in the sense that if you want to add an extra function to your script, you won’t need to remember if you downloaded js / css files.

Answer 2

I think it would be better if you download all jQuery ui js / css, because if in the future, if you want to do something new in jquery, then again you will have to look at the parts that will be needed for this. you need to make extra effort to put this piece of code in your js file, so I think loading the entire jquery will be better approach!!

Answer 3

Download all of the JQuery UI JS and CSS, but make sure that JS contains only the modules you need.

i.e. if you are not using Draggable or Droppable anywhere on your site, do not enable it!

Even if you do not use each module on every page, you will get performance benefits from caching all JS on the first page hit (unlike several different smaller files on several pages) and fewer HTTP requests (one large file and many small files) make up for it.

Answer 4

Not a stupid question, this is the right forum, BUT it depends on the application!

I believe that the best solution overall is to minimize the requests and the size of the files that the client downloads, but at the same time make sure you dev. can easily replace and change parts of the code and make sure that your client receives these updates.

To do this, you really need a combination of the deployment process and the server-side process, which automatically combines the scripts / css, but also allows you to roll client cache when these assets change. You should also use as much of the CDN as possible. You also need to make sure the expiration headers of these assets are set on your web server.

Depending on the structure of the party on the side, some of them may be processed for you.

Here is an example of how github (did?) It with rails https://github.com/blog/551-optimizing-asset-bundling-and-serving-with-rails