Do I really need all the files that the YUI3 loader loads?

Question

I am using public release 2 of the Yahoo User Interface (YUI) 3.5 .

I added the yui-min.js file to my view. All that I am doing is subscribing a button to a click event taking the user to another view. Nothing fancy.

Here is my script reference and my script when I subscribe a button to the click event:

<script src="/Assets/yui_3.5.0pr2/yui/build/yui/yui-min.js"></script>

<script>

     YUI().use('node', 'event', function (Y) {
          Y.one('#cancel').on('click', function (e) {
               window.location = '/Administration/User';
          });
     });

</script>

But when the page loads it makes 39 requests to load all the css files and other YUI3 required files. I can put all 5 of my css files into 1 but that is still 35 requests that are made. And the total download size is about 176kb .

cssreset-min.css
cssfonts-min.css
cssgrids-min.css
cssbase-min.css
admin.css
yui-min.js
oop-min.js
event-custom-base-min.js
dom-core-min.js
dom-base-min.js
selector-native-min.js
selector-min.js
node-core-min.js
node-base-min.js
event-base-min.js
event-delegate-min.js
node-event-delegate-min.js
pluginhost-base-min.js
pluginhost-config-min.js
node-pluginhost-min.js
dom-style-min.js
dom-screen-min.js
node-screen-min.js
node-style-min.js
event-custom-complex-min.js
event-synthetic-min.js
event-mousewheel-min.js
event-mouseenter-min.js
event-key-min.js
event-focus-min.js
event-resize-min.js
event-hover-min.js
event-outside.js
event-touch-min.js
event-move-min.js
event-flick-min.js
event-valuechange-min.js
intl-min.js

This doesn't make sense to me. Why are all these files loaded and I don't used all of them, or do I? What is the benefot of this? With what I am doing, are all these javascript files utilised or does the YUI loader load extra files that aren't used?

Answer 1

In this particular case, and just for what you need, a little tweaking can help. First, you may not need to load the CSS files. In that case, just use the fetchCSS configuration option. Then you probably don't need all of the Node and Event modules to subscribe to a simple event. Just node-base is probably enough. So you can give this a try:

YUI({ fetchCSS: false }).use('node-base', function (Y) {
  Y.one(button).on('click', fn);
});

This takes it down to 11 files and 18kb with Gzip.

But in general, pretty much every file is needed. The reason for that many files is that the YUI team changed their build process and went for a more granular approach. That way the Loader can get what it needs and avoid loading a lot of unnecessary code. The drawback is that if you host it yourself and don't use a system for combining the files it gets really slow to download.

I'd suggest looking at Ryan's Combohandler for NodeJS: https://github.com/rgrove/combohandler . There are other similar projects for other server side platforms.